從0到1贪磺，Nginx部署Nodejs+React教程

從0到1寂恬，Nginx部署Nodejs+React教程

本篇文章以在Github中開源的一個項目“Insight”為例子扣墩，介紹如何通過nginx部署一個有后端和前端的項目哲银，并且可以通過外網(wǎng)可以訪問扛吞。

前提準備

一臺ECS云服務器（阿里云或華為云等任意云服務器）。
一個具有前后端的項目荆责，本文以https://github.com/Elliottssu/insight為例子
域名滥比，這個自己申請。

下面環(huán)境為Ubuntu 16.04 為例子做院，如果你是Windows或其他系統(tǒng)盲泛，可以自行替換相應的步驟。

一键耕、環(huán)境安裝

安裝需要依賴的環(huán)境寺滚，下面我們用到兩個，一個是nodejs屈雄，一個是 nginx

安裝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

上面的命令村视，請一行一行的執(zhí)行。

安裝nginx
安裝：

sudo apt-get install nginx

二酒奶、代碼安裝

打開控制臺蚁孔，執(zhí)行ssh root@47.122.122 登陸云服務器。
克隆git代碼惋嚎。執(zhí)行cd /opt 進入opt目錄后勒虾，執(zhí)行git clone https://github.com/Elliottssu/insight.git，即可完成代碼克隆

三瘸彤、代碼運行修然，服務啟動

上面將代碼下載下來后，接下來就是在當前目錄下质况，下載依賴愕宋。
現(xiàn)在你所在的位置是在/opt

進入前端文件夾，安裝前端依賴

cd insight/insight-front-end/
npm install

安裝完后结榄，執(zhí)行編譯中贝，這樣就會輸出一個build文件夾的靜態(tài)資源

npm run build

進入后端文件夾，安裝后端依賴

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

后端安裝完后臼朗，啟動后端服務

npm run start

經(jīng)過上面的步驟邻寿，前端的靜態(tài)資源在build目錄下，后端會啟動一個7001端口视哑，這個時候你通過ip+端口（需要安全組開啟）绣否，就可以訪問了。

四挡毅、配置nginx蒜撮，可以通過域名訪問

配置nginx的目的就是，讓你訪問的域名能夠訪問本地端口的服務。

在域名里添加一個解析段磨，指定到你的ip地址取逾。
執(zhí)行nginx -t找到你的配置文件地址，默認是/etc/nginx/nginx.conf苹支。
編輯這個文件砾隅，下面是在http下新增的的nginx.conf內(nèi)容

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目錄的路徑注意核對一下

我再貼一下完整的配置

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;
        }
    }
}

重啟nginx
退出保存之后晴埂，請重啟nginxnginx -s reload

五、結(jié)束

到目前為止策幼，如果順利的話邑时，前端編譯成功奴紧，后端服務啟動成功特姐，nginx配置域名可以訪問，你就相當于配置成功了黍氮。

請注意：

insight 項目使用的mysql唐含，請自行安裝，并替換相應的代碼沫浆，注意版本5.6以上
后臺如果要重啟捷枯，可以執(zhí)行npm reload

如果有其他問題，可以在下面評論专执，提出你的問題淮捆。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者