Deploy React Project to ubuntu

Posted on Edited on In , Disqus:

部署React项目到ubuntu

安装NodeJS

Installing Node Using the Node Version Manager (NVM)

To install NVM on your Ubuntu 20.04 machine, visit the project’s GitHub page. Copy the curl command from the README file that displays on the main page.

1
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

This will install the nvm script to your user account. To use it, you must first source your .bashrc file:

1
source ~/.bashrc

Now, you can ask NVM which versions of Node are available:

1
nvm list-remote

You can install a version of Node by typing any of the release versions you see.

1
nvm install v20.18.0

You can see the different versions you have installed by typing:

1
nvm list

You can switch between installed versions with nvm use:

1
nvm use v20.18.0

安装 nginx

1
2
sudo apt update
sudo apt install nginx

Adjusting the Firewall (Lightsail有防火墙就跳过了)

List the application configurations that ufw knows how to work with by typing:

1
sudo ufw app list

You should get a listing of the application profiles:

1
2
3
4
5
6
Output
Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH

As demonstrated by the output, there are three profiles available for Nginx:

  • Nginx Full: This profile opens both port 80 (normal, unencrypted web traffic) and port 443 (TLS/SSL encrypted traffic)
  • Nginx HTTP: This profile opens only port 80 (normal, unencrypted web traffic)
  • Nginx HTTPS: This profile opens only port 443 (TLS/SSL encrypted traffic)

It is recommended that you enable the most restrictive profile that will still allow the traffic you’ve configured. Right now, we will only need to allow traffic on port 80.

You can enable this by typing:

1
sudo ufw allow 'Nginx HTTP'

You can verify the change by typing:

1
sudo ufw status

Nginx命令

  • Stop: sudo systemctl stop nginx
  • Start: sudo systemctl start nginx
  • Restart: sudo systemctl restart nginx
  • Reload: sudo systemctl reload nginx

Nginx Logs

  • /var/log/nginx/access.log: Every request to your web server is recorded in this log file unless Nginx is configured to do otherwise.
  • /var/log/nginx/error.log: Any Nginx errors will be recorded in this log.
1
tc.dtalk.top

Setting Up Server Blocks

Nginx on Ubuntu 20.04 has one server block enabled by default that is configured to serve documents out of a directory at /var/www/html.

可以在/var/www下创建多个站点

Create the directory for your_domain as follows, using the -p flag to create any necessary parent directories:

1
sudo mkdir -p /var/www/your_domain/html

Next, assign ownership of the directory with the $USER environment variable:

1
sudo chown -R $USER:$USER /var/www/your_domain/html

To ensure that your permissions are correct and allow the owner to read, write, and execute the files while granting only read and execute permissions to groups and others, you can input the following command:

1
sudo chmod -R 755 /var/www/your_domain

In order for Nginx to serve this content, it’s necessary to create a server block with the correct directives. Instead of modifying the default configuration file directly, let’s make a new one at /etc/nginx/sites-available/your_domain:

1
sudo vim /etc/nginx/sites-available/your_domain

Paste in the following configuration block, which is similar to the default, but updated for our new directory and domain name:

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
        listen 80;
        listen [::]:80;

        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {
                try_files $uri $uri/ =404;
        }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
server {
        listen 80;
        listen [::]:80;

        root /var/www/blog.felixyi.top/html;
        index index.html index.htm index.nginx-debian.html;

        server_name blog.felixyi.top;

        location / {
                try_files $uri $uri/ =404;
        }
}

Next, let’s enable the file by creating a link from it to the sites-enabled directory, which Nginx reads from during startup:

1
sudo ln -s /etc/nginx/sites-available/your_domain /etc/nginx/sites-enabled/

To avoid a possible hash bucket memory problem that can arise from adding additional server names, it is necessary to adjust a single value in the /etc/nginx/nginx.conf file. Open the file:

1
sudo vim /etc/nginx/nginx.conf

Find the server_names_hash_bucket_size directive and remove the # symbol to uncomment the line.

1
2
3
4
5
6
7
8
...
http {
    ...
    server_names_hash_bucket_size 64;
    ...
}
...

Next, test to make sure that there are no syntax errors in any of your Nginx files:

1
sudo nginx -t

If there aren’t any problems, restart Nginx to enable your changes:

1
sudo systemctl restart nginx

Secure Nginx with Let's Encrypt （SSH）

Install Certbot and it’s Nginx plugin with apt:

1
sudo apt install certbot python3-certbot-nginx

检查nginx配置中的站点名称

1
sudo vim /etc/nginx/sites-available/example.com

Find the existing server_name line. It should look like this:

1
2
3
...
server_name example.com www.example.com;
...

获得SSL证书

1
sudo certbot --nginx -d example.com -d www.example.com

验证定期更新

1
sudo systemctl status certbot.timer
1
2
3
4
5
6
Output
● certbot.timer - Run certbot twice daily
     Loaded: loaded (/lib/systemd/system/certbot.timer; enabled; vendor preset: enabled)
     Active: active (waiting) since Mon 2020-05-04 20:04:36 UTC; 2 weeks 1 days ago
    Trigger: Thu 2020-05-21 05:22:32 UTC; 9h left
   Triggers: ● certbot.service

To test the renewal process, you can do a dry run with certbot:

1
sudo certbot renew --dry-run

create a production build and upload

在本地编译好

1
npm run build

Copy all the build files using the * wildcard to /var/www/your_domain/html:

1
scp -i ~/.ssh/id_rsa_sg  -r ./build/* [email protected]:/var/www/your_domain/html

Nginx Reload

1
sudo systemctl reload nginx