从0到1，Nginx部署Nodejs+React教程

本篇文章以在Github中开源的一个项目“Insight”为例子，介绍如何通过nginx部署一个有后端和前端的项目，并且可以通过外网可以访问。

前提准备

1. 一台ECS云服务器（阿里云或华为云等任意云服务器）。
2. 一个具有前后端的项目，本文以https://github.com/Elliottssu/insight为例子
3. 域名，这个自己申请。

下面环境为Ubuntu 16.04 为例子，如果你是Windows或其他系统，可以自行替换相应的步骤。

一、环境安装

安装需要依赖的环境，下面我们用到两个，一个是nodejs，一个是 nginx

1. 安装node.js

wget https://nodejs.org/dist/v12.18.2/node-v12.18.2-linux-x64.tar.xz
tar -xvf node-v12.18.2-linux-x64.tar.xz -C /usr/local/
cd /usr/local/
mv node-v12.18.2-linux-x64/ nodejs
ln -s /usr/local/nodejs/bin/node /usr/local/bin
ln -s /usr/local/nodejs/bin/npm /usr/local/bin

上面的命令，请一行一行的执行。

2. 安装nginx
   安装：

sudo apt-get install nginx

二、代码安装

1. 打开控制台，执行ssh [email protected] 登陆云服务器。
2. 克隆git代码。执行cd /opt 进入opt目录后，执行git clone https://github.com/Elliottssu/insight.git，即可完成代码克隆

三、代码运行，服务启动

上面将代码下载下来后，接下来就是在当前目录下，下载依赖。
现在你所在的位置是在/opt

1. 进入前端文件夹，安装前端依赖

cd insight/insight-front-end/
npm install

2. 安装完后，执行编译，这样就会输出一个build文件夹的静态资源

npm run build

3. 进入后端文件夹，安装后端依赖

cd ../insight-back-end/
npm install

4. 后端安装完后，启动后端服务

npm run start

经过上面的步骤，前端的静态资源在build目录下，后端会启动一个7001端口，这个时候你通过ip+端口（需要安全组开启），就可以访问了。

四、配置nginx，可以通过域名访问

配置nginx的目的就是，让你访问的域名能够访问本地端口的服务。

1. 在域名里添加一个解析，指定到你的ip地址。
2. 执行nginx -t找到你的配置文件地址，默认是/etc/nginx/nginx.conf。
3. 编辑这个文件，下面是在http下新增的的nginx.conf内容

server {
        listen 80;
        server_name baidu.com;

        location / {
            root /opt/insight/insight-front-end/build/;
            index index.html;
            try_files $uri /index.html;
        }

        location ~/api/ {
            proxy_pass http://127.0.0.1:7001;
            proxy_buffer_size 1024k;
            proxy_buffers 16 1024k;
            proxy_busy_buffers_size 2048k;
            proxy_temp_file_write_size 2048k;
        }
}

上面的server_name后面就是你自己的域名， root后面的路径，就是前端的build目录的路径 注意核对一下

4. 我再贴一下完整的配置

user www-data;
worker_processes auto;
pid /run/nginx.pid;

events {
    worker_connections 768;
    # multi_accept on;
}

http {

    ##
    # Basic Settings
    ##

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    # server_tokens off;

    # server_names_hash_bucket_size 64;
    # server_name_in_redirect off;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    ##
    # SSL Settings
    ##

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
    ssl_prefer_server_ciphers on;

    ##
    # Logging Settings
    ##

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    ##
    # Gzip Settings
    ##

    gzip on;
    gzip_disable "msie6";
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;


    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;


    ## 我的配置
    server {
        listen 80;
        server_name baidu.com;

        location / {
            root /opt/insight/insight-front-end/build/;
            index index.html;
            try_files $uri /index.html;
        }

        location ~/api/ {
            proxy_pass http://127.0.0.1:7001;
            proxy_buffer_size 1024k;
            proxy_buffers 16 1024k;
            proxy_busy_buffers_size 2048k;
            proxy_temp_file_write_size 2048k;
        }
    }
}

5. 重启nginx
   退出保存之后，请重启nginxnginx -s reload

五、结束

到目前为止，如果顺利的话，前端编译成功，后端服务启动成功，nginx配置域名可以访问，你就相当于配置成功了。

请注意：

1. insight 项目使用的mysql，请自行安装，并替换相应的代码，注意版本5.6以上
2. 后台如果要重启，可以执行npm reload

如果有其他问题，可以在下面评论，提出你的问题。