手把手教你把web應用丟到伺服器上（單頁應用+ 服務端渲染）
阿新 • • 發佈：2020-06-29
前兩篇文章中，我分別介紹了框架的搭建利用vue-cli + vant搭建一個移動端開發模板，並且把專案中axios請求和vuex的用法做了簡要的介紹如何在專案裡管理好axios請求與vuex。在這兩篇文章的評論中，有些朋友希望把專案放線上上，可以供大家預覽一下。既然需求來了，哪有拒絕的道理。正好我之前也沒弄過部署專案到伺服器上，那就乘這次機會把專案部署在伺服器上，鞏固一下自己學的知識。
頁面上是我亂加的東西，後續會慢慢完善（可能是模仿某個成熟的專案，也有可能是封裝元件）。
文章概括
一、準備工作
- 你需要到阿里雲（或者其他雲伺服器）買個你自己的伺服器耍耍。我買的是雲伺服器ECS，作業系統是CentOS。
- 購買完成後，你需要一個工具視覺化訪問你的伺服器，我用的是MobaXterm
二、安裝nginx
- 用MobaXterm連線上伺服器後，介面是這樣的（www目錄是我後來建的，用來放前端專案）
2. 安裝命令yum install nginx，出現確認時按y
3. 安裝完成後，輸入 service nginx start 啟動nginx
三、部署web專案(vue-cli)
- 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資料夾
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 {
}
}
- 配置完畢後按Esc退出編輯，然後按:wq退出並儲存，如果提示無法寫入，無許可權，或者改檔案只讀，請輸入:set noreadonly，然後再次:wq，成功會返回命令介面
- 接著我們重啟nginx伺服器，nginx -s reload，如果提示失敗，請輸入nginx -c /etc/nginx/nginx.conf，然後再次重啟，到此為止，我們的專案就部署好了。
- 前端專案執行build指令後，將dist資料夾放到 /www/spa 路徑下。
- 瀏覽器輸入IP:埠號訪問專案，會出現無法訪問的情況，這是因為沒有新增安全組規則（伺服器沒放開此埠的訪問許可權），這個時候我們需要有新增安全組規則，以我專案為例，我快速添加了多個安全組規則。新增完8080埠後，我們就可以在8080埠訪問我們的專案了。
四、部署服務的渲染專案（nuxt.js舉例，next.js同理）
- 安裝nodejs環境(具體步驟請點選此連結)[https://help.aliyun.com/document_detail/50775.html]。
- 安裝yarn(執行以下兩步)
wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo
yum install yarn
- 直接用nuxt.js官網的例子，執行build指令後，我們把以下檔案（資料夾）放到 /www/ssr/blog 路徑下
.nuxt
nuxt.config.js
package.json
static // 如果有用到靜態資源
- 再次進入到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;
}
}
- 接著我們重啟nginx伺服器
nginx -s reload
- 依次以下執行，進入到nuxt專案的路徑下，install依賴並啟動應用
cd ~
cd /www/ssr/blog
yarn install -production
yarn start
在執行yarn install和yarn start兩個命令時可能會報錯，可能是node版本太低了，可以用nvm切換node版本。
開啟IP:8081就可以訪問我們的專案了（記得要在阿里雲伺服器上把8081埠放開）
安裝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指令
- pm2 delete all # 關閉並刪除所有應用
- pm2 list # 列表 PM2 啟動的所有的應用程式
- pm2 stop all # 停止所有的應用程式
- pm2 start app.js --name="api" # 啟動應用程式並命名為 "api"
七、參考文章
八、總結
通過記錄這兩個專案如何釋出到伺服器上，我大致瞭解了nginx的相關知識。如果專案中有不對或者不妥的地方，或者跟著專案走遇到報錯的地方，歡迎在評論區提出。