手把手教你把web應用丟到伺服器上（單頁應用+ 服務端渲染）
阿新 • • 發佈：2020-06-29
> 前兩篇文章中，我分別介紹了框架的搭建[利用vue-cli + vant搭建一個移動端開發模板](https://juejin.im/post/5eb4cfc2e51d453914497c55)，並且把專案中axios請求和vuex的用法做了簡要的介紹[如何在專案裡管理好axios請求與vuex](https://juejin.im/post/5ee9cbcbe51d45742d668390)。在這兩篇文章的評論中，有些朋友希望把專案放在線上，可以供大家預覽一下。既然需求來了，哪有拒絕的道理。正好我之前也沒弄過部署專案到伺服器上，那就乘這次機會把專案部署在伺服器上，鞏固一下自己學的知識。
頁面上是我亂加的東西，後續會慢慢完善（可能是模仿某個成熟的專案，也有可能是封裝元件）。 ## 文章概括 1. 部署一個vue-cli腳手架生成的專案，丟到伺服器上。[預覽地址](http://47.114.140.199:8080/) 2. 部署一個nuxt.js生成的專案，丟到伺服器上。[預覽地址](http://47.114.140.199:8081/) ## 一、準備工作 1. 你需要到阿里雲（或者其他雲伺服器）買個你自己的伺服器耍耍。我買的是雲伺服器ECS，作業系統是CentOS。 2. 購買完成後，你需要一個工具視覺化訪問你的伺服器，我用的是MobaXterm ## 二、安裝nginx 1. 用MobaXterm連線上伺服器後，介面是這樣的（www目錄是我後來建的，用來放前端專案）  2. 安裝命令yum install nginx，出現確認時按y
3. 安裝完成後，輸入 service nginx start 啟動nginx ## 三、部署web專案(vue-cli) 1. nginx預設安裝在/etc/目錄下，我們用cd命令 ``` cd /etc/nginx ``` 進入到nginx根目錄下，在這裡有一個nginx.conf配置檔案，想要部署專案，需要修改這裡相關的配置，我們用vim nginx.conf進入按i鍵，下邊會顯示insert字樣，代表此時可以進行編輯，修改server物件（後面的註釋是為了解釋程式碼的意思，專案使用時需要把註釋去掉，不然會報錯） ``` server { listen 8080 default_server; // 開放訪問的埠號 server_name 47.114.140.199; // 伺服器IP root /usr/share/nginx/html; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { root /www/spa/dist; // 專案所在的位置，我是在根目錄新建了www資料夾 index index.html; // 此html頁面作為IP訪問專案的入口 try_files $uri $uri/ /index.html; // 對於部署Vue、React等單頁應用專案，為防止頁面重新整理時出現404，需要設定 } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } } ``` 2. 配置完畢後按Esc退出編輯，然後按:wq退出並儲存，如果提示無法寫入，無許可權，或者改檔案只讀，請輸入:set noreadonly，然後再次:wq，成功會返回命令介面
3. 接著我們重啟nginx伺服器，nginx -s reload，如果提示失敗，請輸入nginx -c /etc/nginx/nginx.conf，然後再次重啟，到此為止，我們的專案就部署好了。
4. 前端專案執行build指令後，將dist資料夾放到 /www/spa 路徑下。 5. 瀏覽器輸入IP:埠號訪問專案，會出現無法訪問的情況，這是因為沒有新增安全組規則（伺服器沒放開此埠的訪問許可權），這個時候我們需要[有新增安全組規則](https://help.aliyun.com/document_detail/25471.html?spm=a2c4g.11186623.2.23.187d288dFpUP4J#concept-sm5-2wz-xdb)，以我專案為例，我快速添加了多個安全組規則。新增完8080埠後，我們就可以在8080埠訪問我們的專案了。  ## 四、部署服務的渲染專案（nuxt.js舉例，next.js同理） 1. 安裝nodejs環境(具體步驟請點選此連結)[https://help.aliyun.com/document_detail/50775.html]。 2. 安裝yarn(執行以下兩步) ``` wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo ``` ``` yum install yarn ``` 3. 直接用nuxt.js官網的例子，執行build指令後，我們把以下檔案（資料夾）放到 /www/ssr/blog 路徑下 ``` .nuxt nuxt.config.js package.json static // 如果有用到靜態資源 ``` 4. 再次進入到nginx根目錄下，修改nginx.conf，新增一個新的server物件 ``` server { listen 8081; server_name 47.114.140.199; root /www/ssr/blog; location / { proxy_pass http://127.0.0.1:3000; // 反向代理 proxy_set_header Host $host; proxy_set_header X-Forwarded-For $remote_addr; } } ``` 5. 接著我們重啟nginx伺服器 ``` nginx -s reload ``` 6. 依次以下執行，進入到nuxt專案的路徑下，install依賴並啟動應用 ``` cd ~ cd /www/ssr/blog yarn install -production yarn start ``` 在執行yarn install和yarn start兩個命令時可能會報錯，可能是node版本太低了，可以用nvm切換node版本。  7. 開啟IP:8081就可以訪問我們的專案了（記得要在阿里雲伺服器上把8081埠放開） 8. 安裝pm2程序守護 ``` npm install pm2 -g ``` 這裡要記住你的安裝地址，我的是/root/node-v6.9.5-linux-x64/bin/pm2  安裝完成後你執行命令 ``` pm2 list ``` 如果報如下錯誤 ``` pm2: command not found ``` 你需要配製到全域性，即建立一個linux下的軟連線。找到全域性環境PATH路徑，輸入命令： ``` echo $PATH ``` 回車後有以下幾個值 ``` /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin ``` 你可以選擇任何一個以：隔開的路徑做為系統環境路徑，我通常會選/usr/local/bin。執行以下指令建立軟連線 ``` ln -s /root/node-v6.9.5-linux-x64/bin/pm2 /usr/local/bin/ ``` 如果報錯了，你可以換一個  比如換成/usr/local/sbin/ ``` ln -s /root/node-v6.9.5-linux-x64/bin/pm2 /usr/local/sbin/ ``` 注意：/root/node-v6.9.5-linux-x64/bin/pm2是我上面安裝pm2的地址，你需要看你自己的安裝地址是什麼。 這時候以下任一一個指令執行（我用的是上面這個，下面的會導致errored，還不知道原因）： ``` pm2 start npm --name "SSR-service" -- run start #SSR-service的名稱隨便取，最好是你package.json裡的name pm2 start yarn --name "SSR-service" -- run start ```  整個nginx配置： ``` # For more information on configuration, see: # * Official English Documentation: http://nginx.org/en/docs/ # * Official Russian Documentation: http://nginx.org/ru/docs/ user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid; # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. include /usr/share/nginx/modules/*.conf; events { worker_connections 1024; } http { log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; include /etc/nginx/mime.types; default_type application/octet-stream; # Load modular configuration files from the /etc/nginx/conf.d directory. # See http://nginx.org/en/docs/ngx_core_module.html#include # for more information. include /etc/nginx/conf.d/*.conf; server { listen 8080 default_server; server_name 47.114.140.199; root /usr/share/nginx/html; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { root /www/spa/dist; index index.html; try_files $uri $uri/ /index.html; } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } } server { listen 8081; server_name 47.114.140.199; root /www/ssr/blog; location / { proxy_pass http://127.0.0.1:3000; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $remote_addr; } } # Settings for a TLS enabled server. # # server { # listen 443 ssl http2 default_server; # listen [::]:443 ssl http2 default_server; # server_name _; # root /usr/share/nginx/html; # # ssl_certificate "/etc/pki/nginx/server.crt"; # ssl_certificate_key "/etc/pki/nginx/private/server.key"; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 10m; # ssl_ciphers PROFILE=SYSTEM; # ssl_prefer_server_ciphers on; # # # Load configuration files for the default server block. # include /etc/nginx/default.d/*.conf; # # location / { # } # # error_page 404 /404.html; # location = /40x.html { # } # # error_page 500 502 503 504 /50x.html; # location = /50x.html { # } # } } ``` ## 五、可能出現的錯誤 我在用pm2啟動專案時，會顯示狀態是online，但是再執行pm2 ls後，狀態又變成了errored。經過排查我發現，造成錯誤的指令是以下兩中，一個使install時沒加 -production ``` yarn install -production ``` 還有一個是pm2啟動專案時用的是yarn，而不是npm ``` pm2 start npm --name "SSR-service" -- run start ```  ## 六、常用pm2指令 1. pm2 delete all # 關閉並刪除所有應用 2. pm2 list # 列表 PM2 啟動的所有的應用程式 3. pm2 stop all # 停止所有的應用程式 4. pm2 start app.js --name="api" # 啟動應用程式並命名為 "api" ## 七、參考文章 - [原來安裝Nginx並部署vue前端專案是這麼簡單](https://blog.csdn.net/weixin_42173451/article/details/105179484) - [部署Node.js環境（CentOS 7）](https://help.aliyun.com/document_detail/50775.html) - [NuxtJS 專案部署如何部署到nginx](https://blog.csdn.net/u012878818/article/details/100115408) - [PM2 常用命令](https://www.jianshu.com/p/9cab8f7020c1) ## 八、總結 通過記錄這兩個專案如何釋出到伺服器上，我大致瞭解了nginx的相關知識。如果專案中有不對或者不妥的地方，或者跟著專案走遇到報錯的地方，歡迎在評論區
頁面上是我亂加的東西，後續會慢慢完善（可能是模仿某個成熟的專案，也有可能是封裝元件）。 ## 文章概括 1. 部署一個vue-cli腳手架生成的專案，丟到伺服器上。[預覽地址](http://47.114.140.199:8080/) 2. 部署一個nuxt.js生成的專案，丟到伺服器上。[預覽地址](http://47.114.140.199:8081/) ## 一、準備工作 1. 你需要到阿里雲（或者其他雲伺服器）買個你自己的伺服器耍耍。我買的是雲伺服器ECS，作業系統是CentOS。 2. 購買完成後，你需要一個工具視覺化訪問你的伺服器，我用的是MobaXterm ## 二、安裝nginx 1. 用MobaXterm連線上伺服器後，介面是這樣的（www目錄是我後來建的，用來放前端專案）  2. 安裝命令yum install nginx，出現確認時按y
3. 安裝完成後，輸入 service nginx start 啟動nginx ## 三、部署web專案(vue-cli) 1. nginx預設安裝在/etc/目錄下，我們用cd命令 ``` cd /etc/nginx ``` 進入到nginx根目錄下，在這裡有一個nginx.conf配置檔案，想要部署專案，需要修改這裡相關的配置，我們用vim nginx.conf進入按i鍵，下邊會顯示insert字樣，代表此時可以進行編輯，修改server物件（後面的註釋是為了解釋程式碼的意思，專案使用時需要把註釋去掉，不然會報錯） ``` server { listen 8080 default_server; // 開放訪問的埠號 server_name 47.114.140.199; // 伺服器IP root /usr/share/nginx/html; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { root /www/spa/dist; // 專案所在的位置，我是在根目錄新建了www資料夾 index index.html; // 此html頁面作為IP訪問專案的入口 try_files $uri $uri/ /index.html; // 對於部署Vue、React等單頁應用專案，為防止頁面重新整理時出現404，需要設定 } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } } ``` 2. 配置完畢後按Esc退出編輯，然後按:wq退出並儲存，如果提示無法寫入，無許可權，或者改檔案只讀，請輸入:set noreadonly，然後再次:wq，成功會返回命令介面
3. 接著我們重啟nginx伺服器，nginx -s reload，如果提示失敗，請輸入nginx -c /etc/nginx/nginx.conf，然後再次重啟，到此為止，我們的專案就部署好了。
4. 前端專案執行build指令後，將dist資料夾放到 /www/spa 路徑下。 5. 瀏覽器輸入IP:埠號訪問專案，會出現無法訪問的情況，這是因為沒有新增安全組規則（伺服器沒放開此埠的訪問許可權），這個時候我們需要[有新增安全組規則](https://help.aliyun.com/document_detail/25471.html?spm=a2c4g.11186623.2.23.187d288dFpUP4J#concept-sm5-2wz-xdb)，以我專案為例，我快速添加了多個安全組規則。新增完8080埠後，我們就可以在8080埠訪問我們的專案了。  ## 四、部署服務的渲染專案（nuxt.js舉例，next.js同理） 1. 安裝nodejs環境(具體步驟請點選此連結)[https://help.aliyun.com/document_detail/50775.html]。 2. 安裝yarn(執行以下兩步) ``` wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo ``` ``` yum install yarn ``` 3. 直接用nuxt.js官網的例子，執行build指令後，我們把以下檔案（資料夾）放到 /www/ssr/blog 路徑下 ``` .nuxt nuxt.config.js package.json static // 如果有用到靜態資源 ``` 4. 再次進入到nginx根目錄下，修改nginx.conf，新增一個新的server物件 ``` server { listen 8081; server_name 47.114.140.199; root /www/ssr/blog; location / { proxy_pass http://127.0.0.1:3000; // 反向代理 proxy_set_header Host $host; proxy_set_header X-Forwarded-For $remote_addr; } } ``` 5. 接著我們重啟nginx伺服器 ``` nginx -s reload ``` 6. 依次以下執行，進入到nuxt專案的路徑下，install依賴並啟動應用 ``` cd ~ cd /www/ssr/blog yarn install -production yarn start ``` 在執行yarn install和yarn start兩個命令時可能會報錯，可能是node版本太低了，可以用nvm切換node版本。  7. 開啟IP:8081就可以訪問我們的專案了（記得要在阿里雲伺服器上把8081埠放開） 8. 安裝pm2程序守護 ``` npm install pm2 -g ``` 這裡要記住你的安裝地址，我的是/root/node-v6.9.5-linux-x64/bin/pm2  安裝完成後你執行命令 ``` pm2 list ``` 如果報如下錯誤 ``` pm2: command not found ``` 你需要配製到全域性，即建立一個linux下的軟連線。找到全域性環境PATH路徑，輸入命令： ``` echo $PATH ``` 回車後有以下幾個值 ``` /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin ``` 你可以選擇任何一個以：隔開的路徑做為系統環境路徑，我通常會選/usr/local/bin。執行以下指令建立軟連線 ``` ln -s /root/node-v6.9.5-linux-x64/bin/pm2 /usr/local/bin/ ``` 如果報錯了，你可以換一個  比如換成/usr/local/sbin/ ``` ln -s /root/node-v6.9.5-linux-x64/bin/pm2 /usr/local/sbin/ ``` 注意：/root/node-v6.9.5-linux-x64/bin/pm2是我上面安裝pm2的地址，你需要看你自己的安裝地址是什麼。 這時候以下任一一個指令執行（我用的是上面這個，下面的會導致errored，還不知道原因）： ``` pm2 start npm --name "SSR-service" -- run start #SSR-service的名稱隨便取，最好是你package.json裡的name pm2 start yarn --name "SSR-service" -- run start ```  整個nginx配置： ``` # For more information on configuration, see: # * Official English Documentation: http://nginx.org/en/docs/ # * Official Russian Documentation: http://nginx.org/ru/docs/ user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid; # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. include /usr/share/nginx/modules/*.conf; events { worker_connections 1024; } http { log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; include /etc/nginx/mime.types; default_type application/octet-stream; # Load modular configuration files from the /etc/nginx/conf.d directory. # See http://nginx.org/en/docs/ngx_core_module.html#include # for more information. include /etc/nginx/conf.d/*.conf; server { listen 8080 default_server; server_name 47.114.140.199; root /usr/share/nginx/html; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { root /www/spa/dist; index index.html; try_files $uri $uri/ /index.html; } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } } server { listen 8081; server_name 47.114.140.199; root /www/ssr/blog; location / { proxy_pass http://127.0.0.1:3000; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $remote_addr; } } # Settings for a TLS enabled server. # # server { # listen 443 ssl http2 default_server; # listen [::]:443 ssl http2 default_server; # server_name _; # root /usr/share/nginx/html; # # ssl_certificate "/etc/pki/nginx/server.crt"; # ssl_certificate_key "/etc/pki/nginx/private/server.key"; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 10m; # ssl_ciphers PROFILE=SYSTEM; # ssl_prefer_server_ciphers on; # # # Load configuration files for the default server block. # include /etc/nginx/default.d/*.conf; # # location / { # } # # error_page 404 /404.html; # location = /40x.html { # } # # error_page 500 502 503 504 /50x.html; # location = /50x.html { # } # } } ``` ## 五、可能出現的錯誤 我在用pm2啟動專案時，會顯示狀態是online，但是再執行pm2 ls後，狀態又變成了errored。經過排查我發現，造成錯誤的指令是以下兩中，一個使install時沒加 -production ``` yarn install -production ``` 還有一個是pm2啟動專案時用的是yarn，而不是npm ``` pm2 start npm --name "SSR-service" -- run start ```  ## 六、常用pm2指令 1. pm2 delete all # 關閉並刪除所有應用 2. pm2 list # 列表 PM2 啟動的所有的應用程式 3. pm2 stop all # 停止所有的應用程式 4. pm2 start app.js --name="api" # 啟動應用程式並命名為 "api" ## 七、參考文章 - [原來安裝Nginx並部署vue前端專案是這麼簡單](https://blog.csdn.net/weixin_42173451/article/details/105179484) - [部署Node.js環境（CentOS 7）](https://help.aliyun.com/document_detail/50775.html) - [NuxtJS 專案部署如何部署到nginx](https://blog.csdn.net/u012878818/article/details/100115408) - [PM2 常用命令](https://www.jianshu.com/p/9cab8f7020c1) ## 八、總結 通過記錄這兩個專案如何釋出到伺服器上，我大致瞭解了nginx的相關知識。如果專案中有不對或者不妥的地方，或者跟著專案走遇到報錯的地方，歡迎在評論區