從零開始上線網站的平常（二）— 第一次上線

上一章： 從零開始上線網站的平常（一）— 先後端分離網站本地調通

本章目標：在雲服務器上線上一章完成的網站

時間：2019.05.13

零. 步驟

• 項目打包
• 雲服務器環境部署（JDK & Nginx）
• 項目部署
• 部署腳本編寫

一. 項目打包

1. 前端項目打包

前端項目打包比較簡單，進入前端項目目錄，運行yarn build便可完成打包

打包結果即當前目錄下的 dist 文件夾，其內容如圖所示：

將 dist 文件夾壓縮爲dist.zip包便可

2. 後端項目打包

1) 使用 IDEA 打包後端項目

• A. 配置 IDEA

  • a. 點擊IDEA 頂部欄 File - Project Structure

  • b. 在 Project Structure 窗口中點擊 Artifacts - JAR - From modules with dependencies

  • c. 在 Create JAR from Modules 中點擊 Main Class 右邊的文件夾圖標，在彈出的 Select Main Class 框中選中 SpringBoot 項目的啓動文件（通常會自動顯示）

  • d. 在 JAR files from libraries 部分選中第二項，下方目錄默認便可，點擊確認.

  • e. 打包配置已經完成，能夠看到 Project Structure-Project Settings-Artifacts 中，已經出現了一個 xx:jar 的配置，在其 Output Layout 部分能夠看到項目包含的 Maven 庫，點擊右下角 OK 確認便可.

  • f. 生成文件如圖所示

• B. 打包項目

  • a. 清除：首先在 IDEA 右側點擊 Maven, 進入 項目名-Lifecycle , 雙擊 clean 清除舊文件

  • b. 打包：完成清除以後雙擊 package , IDEA 將開始執行打包操做

  • c. 結果：進入 target 目錄檢查打包以後的 jar 文件

3. 本地啓動部署包

如今已經完成了先後端項目的打包，在把項目部署到服務器以前，能夠在本地嘗試運行部署包

1）本地啓動後端部署包

因爲本地已經安裝了 Java 環境且 SpringBoot 內置 Tomcat，因此只須要使用 Java 啓動便可(進入打包結果目錄)，命令以下

java -jar jar包名.jar

運行效果以下所示：

2）本地啓動前端部署包

這裏咱們選擇全局安裝 命令行服務器http-server，用它在dist 目錄開啓服務。命令以下：

yarn global add http-server
cd dist 
http-server

操做流程效果以下圖所示：

3）聯調測試

在瀏覽器輸入回顯的地址便可訪問打包後的前端項目,運行結果以下所示：

前端項目運行成功且後端接口回顯正確，說明聯調經過，能夠準備發佈上線了。

二. 雲服務器環境部署（JDK & Nginx）

本章目標是完成雲服務器的環境部署，爲了保證流程準確性，已將原有服務器重裝系統，真正從零開始。（Tip：除非是本身的服務器否則不要隨便重裝）

• 雲服務器廠商：騰訊雲
• 系統版本：Centos7.4 64位
• JDK 版本：jdk1.8.0_211

1. ssh登陸雲服務器

雲服務器能夠自行選購，最終會得到本身服務器的公網 IP 、用戶名(通常默認爲 root)和登陸密碼，這對用密碼方式登陸的狀況已經足夠了。開啓終端輸入 ssh 用戶名@公網IP 而後回車，輸入登陸密碼再次回車便可完成登陸進入系統終端，演示圖以下：

2. JDK環境部署

JDK 環境爲 SpringBoot 項目的運行提供了運行環境支持，因此須要先進行 JDK 環境安裝, 步驟以下：

1) 檢查系統是否自帶 JDK 或者 openJDK，命令以下所示：

java -version

個人運行結果以下圖所示，這種狀況是系統不自帶 JDK 環境：

若是運行結果和我不相同的話能夠參考網上教程排查操做.

2) 下載 JDK

在服務器上新建文件夾用來存儲安裝包及上傳文件，而後進入該文件夾

因爲如今 Oracle 加了下載限制因此不能經過 wget 下載官網的包，只能在本地電腦先打開Oracle官網-Java下載，註冊後登陸下載 jdk-8u211-linux-x64.tar.gz 文件

再經過 scp 上傳到遠程服務器上剛剛建立的 temp 文件夾, 命令以下：

scp jdk-8u211-linux-x64.tar.gz root@遠程服務器的 IP 地址:/temp

3) 安裝 JDK

說是安裝，實際上是將下載下來的壓縮包解壓到指定位置，而後配置一下環境路徑就搞定了。如今建立 java 目錄並解壓：

mkdir /usr/local/java
tar -zxvf /temp/jdk-8u211-linux-x64.tar.gz /usr/local/java/

而後使用命令 vim /etc/profile 打開配置文件，在文件末尾加上下面的內容後保存退出

export JAVA_HOME=/usr/local/java/jdk1.8.0_211
export JRE_HOME=${JAVA_HOME}/jre
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib
export PATH=${JAVA_HOME}/bin:$PATH

最後使用命令 source /etc/profile 使配置生效，再次輸入java -version查看 JDK 版本便可

3. Nginx環境手動部署

不一樣於直接訪問某個 html 文件的前端項目，Vue這一類單頁應用項目的正常運做須要將所有路由指向 index.html 文件，再由其路由機制處理跳轉到對應的顯示組件，因此這裏咱們須要藉助 Nginx 來協助轉發。

安裝 Nginx 的兩種方法能夠看我以前的這篇文章Nginx筆記-0-Centos環境下安裝，這裏咱們選擇 從源代碼安裝 的方式, 安裝完成以後嘗試啓動 Nginx, 並在本地瀏覽器經過服務器 IP 地址訪問，若是 Nginx 配置成功並完成啓動將可以訪問到 Welcome to Nginx界面 即開啓成功.

三. 項目部署

1. scp 上傳項目到服務器

如今繼續將先後端的部署包傳輸到服務器的temp文件夾

# 進入前端項目文件夾，進行前端部署包上傳
scp dist.zip root@遠程服務器的 IP 地址:/temp
# 進入後端項目文件夾的 target 目錄，進行前端部署包上傳
scp pokemon-0.0.1-SNAPSHOT.jar root@遠程服務器的 IP 地址:/temp

2. 後端項目部署 & 測試

1). 項目部署準備

用下面的命令建立新文件夾並將項目部署包移動到文件夾中

mkdir /usr/local/pokemon
cp /temp/pokemon-0.0.1-SNAPSHOT.jar /usr/local/pokemon
cd /usr/local/pokemon/

2). 直接執行

java -jar pokemon-0.0.1-SNAPSHOT.jar

因爲 SpringBoot內部自帶 Tomcat，因此後臺程序已經在服務器上的端口上打開了，咱們能夠在本地用瀏覽器訪問 遠程服務器IP地址:8095/hello, 效果以下所示：

後端程序在服務器上運行成功了！

3). 後臺執行

咱們上面經過命令直接運行了後端程序，可是關閉終端或者 Ctrl+C 以後程序便會結束，這對須要長時間工做的後端程序來講是不科學的，咱們須要經過某種方式讓後端程序一直在服務器上運行，它的實現很簡單，只須要在本來的直接運行命令上稍做修改(結尾不要漏掉)：

nohup java -jar pokemon-0.0.1-SNAPSHOT.jar &

運行過程圖以下所示：

運行以後顯示了一個數字，而後 Ctrl+C 關掉再訪問接口，發現依舊能夠訪問到接口數據，至此後端程序已經成功部署到服務器上了！

若是想要關閉應用, ps -ef | grep pokemon-0.0.1-SNAPSHOT.jar 查詢到後端程序運行的 PID 號，而後使用 kill 後端程序PID號 來關閉程序, 操做過程以下所示：

固然本章節目的是把後端程序運行起來，這樣接下來才能與線上的前端配合完成部署。

3. 前端項目部署 & 測試

1) 項目部署準備

前端打包文件如今正以 zip 格式靜靜躺在/temp 等待部署，如今咱們將它移動到 /usr/share/nginx/html 目錄(這是 Nginx 默認配置的前端目錄，Nginx 的訪問成功頁面就是這裏面的 index.html)，而後將文件名字修改成 pokemon, 過程以下所示:

前端項目不須要像後端項目同樣運行，因此咱們嘗試用連接遠程服務器IP/pokemon/index.html來訪問前端項目了，效果以下：

在瀏覽器上看到頁面一片空白，可是標題寫着 pokemon-fe，說明已經訪問到了 index.html 文件，之因此不能顯示可能跟右側的失敗請求有關，鼠標點擊一條失敗的請求看看緣由：

能夠看到，同在一個 pokemon 文件夾下的 css/app.6d7f6bba.css 文件，訪問路徑上卻比瀏覽器地址欄的 index.html 文件缺乏了 /pokemon 的路徑，致使了資源訪問的失敗，這是爲何呢，咱們來看看 index.html 中是如何引用該css文件的：

index.html 對於該 css 文件直接經過 /css/app.6d7f6bba.css 引用, 而 Nginx 的前端相關地址指向默認是 html 文件夾(/usr/share/nginx/html), 請求 IP 地址/css/app.6d7f6bba.css 指向的實際文件地址天然是 /usr/share/nginx/html/css/app.6d7f6bba.css 了，因此 css 和 js 都不能被正確訪問到。

想要解決這個問題, 思路有兩種。一種是改項目配置的思路，在代碼中經過配置文件爲項目的資源添加路徑，也就是使 index.html 中的引用改成 /pokemon/css/app.6d7f6bba.css , 這樣就可以正確訪問到資源了，不過再改一次代碼並上線稍顯繁瑣，此次咱們能夠先嚐試藉助 Nginx 的力量，在不改代碼的狀況下修復這個問題。

2) Nginx 導航

Tip：本小節內容僅爲入門學習引導使用，正式環境部署項目的 Nginx 配置請參考以後章節

以後進入 /usr/share/nginx 目錄, 運行vim nginx.conf, 修改 location / 配置以下：

而後運行 Nginx 操做命令測試配置並使配置生效：

將根目錄的 root html 改成 root html/pokemon, 這樣就能完成將全部請求轉發到 pokemon 目錄下了, 如今咱們訪問前端項目也無需輸入 /pokemon 了，因而咱們嘗試訪問 遠程服務器 IP 地址/index.html，結果以下：

發現頁面仍是一片空白，只出現了 Home | About，並且右側的請求所有成功，那麼問題出在哪呢？嘗試點擊一下頁面上的 Home 和 About 發現竟然可以回到正常的工程頁面，瀏覽器地址欄的路徑非別是 遠程服務器 IP 地址 及 遠程服務器 IP 地址/about

那麼...

當咱們只是經過 遠程服務器 IP 地址 訪問的時候，請求進入 /pokemon 目錄並被 Vue-Router 所處理到，接着依照前端項目中的 router.js 文件導航到組件 Home 並渲染，因而咱們看到了顯示着 Vue Logo 的界面，使用 遠程服務器 IP 地址/about 訪問亦是此原理。

那麼爲何訪問 遠程服務器 IP 地址/index.html 只能看到只有 Home|About 的界面呢？答案就是路由找不到 index.html 這個路徑，而後只能將其做爲一個靜態資源來解析渲染，等同於如今訪問遠程服務器 IP 地址/css/app.6d7f6bba.css只會渲染文字，，然而 html 文件不一樣於 CSS 和 JS 文件，它會被瀏覽器解析並顯示，因而就出現了只包含 Home| About 的白屏界面了!以上（古美門臉

如今咱們已經部署成...等等，這是什麼

後端接口數據請求出錯？這個接口有點奇怪呀，如今到了服務器上了，地址應該是 ip:8095/hello 而不是 localhost:8095/hello 吧. 咱們回到上一篇文章 從零開始上線網站的平常（一）— 先後端分離網站本地調通 的 基於 axios 編寫請求 部分，可以看到代碼中是這樣寫的：

這裏經過硬編碼的形式把請求固定爲了 localhost:8095 開頭... 果真什麼配置都不修改直接打包是不行的呀（捂胸口

還能咋辦？刪除服務器上的前端項目(pokemon文件夾)，而後回去改代碼唄，把原來url配置改成以服務器地址開頭的配置:

而後按照以前的流程在本地項目經過 yarn build 打包並 scp 傳輸到服務器，複製解壓文件, 流程以下所示：

再次刷新網頁查看部署結果：

完結撒花~ 如今咱們已經成功完成了一次完整先後端分離網站的上線了！雖然還有許多問題存在，可是在接下來會的系列文章中一一解決的~

To be continue...

系列文章

從零開始上線網站的平常（一）— 先後端分離網站本地調通

從零開始上線網站的平常（二）— 第一次上線 ←當前位置

版權信息

做者：Nodreame

連接：https://segmentfault.com/a/11...

著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。