Vue+express專案優化上線（2）

• Vue+express專案優化上線（2）
  • 1.購買伺服器以及域名
  • 2.繫結域名指向主機IP
  • 3.防火牆設定
  • 4.配置伺服器
    • 4.1 設定root賬號密碼
    • 4.2 下載Xshell和Xftp簡化遠端連線伺服器
    • 4.3 部署Nodejs環境
    • 4.4 安裝mysql8.0
    • 4.5 安裝nginx
    • 4.6 安裝pm2用以守護node程序
  • 5.部署專案
    • 5.1 遷移資料庫
    • 5.2 上傳前後端專案檔案
    • 5.3 配置nginx進行反向代理
    • 5.4 pm2啟動後端專案
  • 6.總結

1.購買伺服器以及域名

• 域名：阿里雲=>開發者成長計劃=>選擇購買域名的型別=>搜尋想要的域名（有些特定詞彙很貴）=>下單=>填寫資訊=>個人資訊驗證備案=>等待
• 伺服器：阿里雲=>開發者成長計劃=>輕量應用伺服器=>選擇系統映象CentOS 7.3=>下單
• 關於伺服器：系統映象是純淨版的系統，應用映象是安裝了部分軟體的系統，我選擇使用系統映象，手動搭建環境。差別可以參考知乎文章

2.繫結域名指向主機IP

• 進入伺服器控制檯=>站點設定=>繫結域名=>解析域名到公網IP=>按照阿里雲流程進行備案

3.防火牆設定

• 進入伺服器控制檯=>安全=>防火牆
• 新增規則，開啟專案必須的埠，常用的有80、443、22、3306

4.配置伺服器

4.1 設定root賬號密碼

• 進入伺服器控制檯=>伺服器運維=>遠端連線=>設定密碼=>等待重啟伺服器
• 嘗試使用阿里雲的遠端連線，連線正常，進入伺服器命令介面

4.2 下載Xshell和Xftp簡化遠端連線伺服器

• 使用這個地址申請免費版本Xshell&Xftp
• 等待下載地址傳送至你的郵箱，下載並安裝
• 開啟Xshell新建會話=>選擇ssh協議=>填入伺服器的公網IP=>埠預設22=>使用者身份驗證=>填入使用者名稱和密碼即可自動登入
• 使用Xshell的命令視窗來操作伺服器

4.3 部署Nodejs環境

• 此部落格非常詳細，幫助很大參考部落格
• 輔以此篇部落格，安裝成功參考部落格
• 此處獲取各個版本nodejs檔案nodejs官方資源

4.4 安裝mysql8.0

• 選擇使用與本地資料庫同版本

• 流程較長，務必參考部落格

• 還是得參考前輩的部落格

• 按步驟走，在初始化mysql資料庫時遇到報錯

  mysqld --initialize;
  
  mysqld: error while loading shared libraries: libaio.so.1: cannot open shared object file: No such file or directory
  

• 解決方法：# yum install -y libaio //安裝後在初始化就OK了

• 關於防火牆部分的步驟可以省略，使用阿里雲可以直接新增安全規則，開啟所需的3306埠即可使用sqlyog成功連線

4.5 安裝nginx

• 安裝：yum -y install nginx
• 啟動：service nginx start
• 測試：直接訪問伺服器IP，開啟歡迎頁面

4.6 安裝pm2用以守護node程序

• 安裝：cnpm install -g pm2 //全域性安裝pm2
• 測試：pm2

5.部署專案

5.1 遷移資料庫

• 使用sqlyog視覺化資料庫工具，連線本地與伺服器端mysql資料庫
• 右鍵本地需要遷移的資料庫=>將資料庫複製到不同的主機/資料庫
• 將本地伺服器複製到伺服器端

5.2 上傳前後端專案檔案

• 將前端專案中的請求地址，根據上線情況自行修改，npm run build 打包獲得dist檔案
• 通過Xshell命令列視窗上方的小圖示即可開啟安裝好的Xftp
• 使用xftp在服務端/root目錄下新建一個XXX_app資料夾
• 將本地的dist資料夾和後端server資料夾拖入伺服器新建的資料夾

5.3 配置nginx進行反向代理

• 路徑：/etc/nginx/nginx.conf

• cd /etc/nginx

• vim ./nginx.conf //按shift + i 進入編輯狀態，上下方向鍵控制游標

• 我的主要修改內容

  //修改user為root
  user root;
  worker_processes auto;
  error_log /var/log/nginx/error.log;
  pid /run/nginx.pid;
  
  //server部分配置代理
  server {
          listen       80 default_server;
          listen       [::]:80 default_server;
          server_name  localhost;
          #如果你的站點綁定了域名，server_name填寫你的域名
  
          # Load configuration files for the default server block.
          include /etc/nginx/default.d/*.conf;
          #此處代理靜態頁面請求
          location / {
              root /root/psms_app/dist;
              index index.html index.htm;
          }
  		#此處代理髮送給後端的請求
          location /api/ {
  		proxy_pass http://localhost:3000/;
          }
  
          error_page 404 /404.html;
          location = /404.html {
          }
  

• 修改完配置，Ctrl + c 退出編輯，:wq 儲存退出

• vim三種模式：命令模式、插入模式、編輯模式。使用ESC或i或：來切換模式。
  命令模式下：
  :q 退出
  :q! 強制退出
  :wq 儲存並退出
  

• 重啟nginx服務：service nginx restart

• 此時訪問網站應展示前端專案

5.4 pm2啟動後端專案

• 檢視當前管理的應用列表：pm2 list

• cd 進入你的後端專案資料夾中

• 啟動專案：pm2 start ./專案入口檔案 --name 一個別名

• 此時前後端專案應該已經完全上線

• //pm2的常用指令
  pm2 start ./專案入口檔案 --name 一個別名
  pm2 list
  pm2 stop id或name
  pm2 delete id或name
  

• 記錄一個小坑，訪問網站時，網站標籤上的小圖示未顯示，百度後建議等待，第二天恢復正常

6.總結

• 關於nginx應該深入瞭解，功能強大=>nginx視訊教程
• 參考的專案上線部落格
  • vue+express+mysql專案總結（部署）
  • 阿里雲centos部署vue+node(express)+mysql，超詳細
  • 新手第一次部署前端專案到阿里雲伺服器詳細步驟（CentOS系統）
  • vue+node(express)+mysql部署阿里雲伺服器
  • Nginx conf 配置檔案詳解
  • Nginx的Gzip壓縮配置
• 我的前端專案碼雲倉庫