繼上一篇文章之後，我把開發的系統放到阿里雲服務器當中，並且成功上線。
01 前言
繼上一篇文章之後，上一次我寫的是前端搭建的後臺系統如何與本地數據庫或者線上數據庫連接的文章，但是我們所有開發的項目不可能是放在本地運行的，怎麼也得把它放到服務器上面，讓別人也可以通過你的公網地址訪問，今天折騰了一下還是挺費勁的，遇到了幾個坑，接下來就跟大家說一下如何解決這些問題。
但是你如果要把項目放到服務器的話肯定是要有一臺屬於你的服務器，不然的話也沒辦法做。如果你還沒有的話可以去阿里雲買一個，學生價也是比較便宜的，一年也就100多。這裏我是推薦大家一定要玩一下服務器怎麼操作，也是作爲前端的必備技能之一，廢話少說，開始。
02 連接服務器
首先我們購買服務器之後就進行連接一下，關於怎麼購買和配置等的內容大家可以網上找一下，很簡單的操作。
我們可以選擇一個連接工具，我這裏選擇的是FinalShell，大家也可以選擇其他的。我們先打開軟件新建一個鏈接，輸入服務器的公網IP和密碼你就可以連接了。
由於服務器大都是使用linux系統，所以大家就必須知道一些linux的指令，方便我們進行文件操作。常用的指令就幾種而已，複雜的基本上用不到，作爲初學者的我們就瞭解即可。
- cd 進入某一個文件夾，可以進入多級，如 cd var/www/ 這種
- ls 查看當前的文件夾有哪些文件或者文件夾
- pwd 查看當前你的位置是哪裏
- vim xxx 編輯xxx這個文件，進去之後輸入i就可以編輯了，完了之後按退出鍵(esc)，然後輸入:wq退出並保存
- cat xxx 查看xxx這個文件
瞭解了這些你就可以上手服務器部署了，其實是比較簡單的操作，但是有一些刪除的指令就不要亂學了，防止小白亂操作整壞了自己的服務器，這個finalshell可以通過右鍵進行上傳或者刪除操作，適合入門和那些習慣window的小夥伴。
03 文件上傳
連接上了之後，基本上和window的操作差不多，你選擇一個位置放你的項目，我一般是放在 var/www下面。大家也可以選擇你任意的位置，記住放在哪裏就好了。
路徑引入問題
我們在上傳之前要對你的項目進行打包，執行npm run build 進行項目的打包，這是你項目上線部署才需要做的，一般我們平時開發都是使用npm run dev 來啓動一個本地的服務器。但是你在打包之前要改一些東西，不然你的項目放上去之後是無法訪問的。要改哪裏呢？
我們在項目根目錄之下有一個config的文件夾，裏面有一個index.js的配置文件，修改dev下面的assetsPublicPath的值，如：
dev: {
env: require('./dev.env'),
port: process.env.PORT || 7999,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: './',
proxyTable: {
'/api': {
target: 'http://localhost:3000/api',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
我們平時開發的是 ‘/’ ，現在我們要改成 ‘./’。這個值表示你的項目打包之後，index.html裏面引用資源的相對路徑。不得不說，這個坑其實我之前就踩過一次，但是沒辦法之前沒有好好總結下來，沒有形成總結的習慣，現在我知道寫博客的好處了，要是以後我再踩這個坑…不，以後不會了。
靜態資源引用
我們進行項目打包之後，根目錄下面會生成一個dist文件夾，然後我們可以看一下里面的內容，除了一個static和一個html文件其他就沒有了。這就是單頁應用，最後只導出一個出口。
我們可以在之前寫好的server文件夾下面的index.js文件修改一下，我們之前是使用express框架搭建的，所以我們在部署上去的時候加上：
const path = require('path');
app.use(express.static(path.join(__dirname, '../dist')));
這裏的意思就是我們引入靜態文件的內容，如果沒有引用我們的項目也是無法啓動的，顯示不出什麼頁面。
Nginx代理問題
我們的上線網站是給別人看的，所以我們設置一下代理，讓所有的請求都可以定向到你的項目地址。我們配置之前首先要進行一下nginx服務器的安裝，在服務器上面也是比較簡單的，當然你的服務器也要有node環境纔可以，一行命令搞定：
npm install -y nginx
然後安裝完成之後我們就去它的配置文件看一下，默認的路徑就是在 /etc/nginx/nginx.conf 下面，我們也不用去更改。我們可以通過cat命令查看一下，假如你要進行配置就使用vim命令。這裏我們使用vim命令進去，找到server這一地方，像我這裏配置：
server_name就是你的IP地址，也可以寫你的域名，不過你要有域名相關的配置和解析，這裏我們就暫時不管它。然後我們看到location這裏，就是寫你的項目放到的地方，我就是放到了var/www/vue-admin下面。修改完了之後我們退出並保存。重啓一下nginx服務器，不然可能配置不生效：
service nginx restart
這樣配置後我們就可以每次訪問這個公網IP+端口之後（默認80端口）就會找你的項目，這樣你的項目就會顯示了。綜上，其實我們就在寫bug和找bug之間徘徊。
04 啓動項目
大家先別急，我們上面是配置了一些東西，但是項目還沒有啓動的，我們要做的是先安裝一下相關的依賴。我們把項目的package.json文件上傳到與dist文件夾同級下面，然後執行npm install 就好，如果安裝不成功或者網速很慢，大家可以切換到國內的淘寶鏡像即可：
npm install --registry=https://registry.npm.taobao.org
這個過程可能有一點費時間。安裝完成之後我們進入server的文件夾，執行node index.js啓動我們的服務，它會進行數據庫的連接，我們就可以使用寫好的接口查詢數據庫。值得注意的是我們不能使用本地的數據庫連接，因爲線上是訪問不到你的數據庫的，最好在服務器上面安裝mysql服務器，把數據都導進去裏面，關於這部分也比較簡單，大家網上查閱一下即可。
項目啓動之後我們我們可以輸入你的ip+端口訪問你的項目，如12.56.567.789:3000這樣。因爲它默認的是80端口，我的端口已經被佔用了，所以我就採用3000端口，就是server啓動後的監聽的3000端口，這裏你可以改成其他的，但是訪問的時候你也要跟着變。
可能有同學的服務器端口沒有開放，導致項目運行不成功，我們可以去到阿里雲的控制檯看一下，找到安全組配置，開放你的端口就可以了，因爲每次搞都比較麻煩，索性我所有端口都開放了。
如無意外我們就可以看到你自己的項目了，如果有報錯或者其他的可以看一下瀏覽器的控制檯。但是到這裏我們就會出現一個問題，就是我們如果關閉了服務器我們的server服務就會停止了，這樣不行呀，我的頁面不可能一直這樣掛着。所以我們就使用一個比較牛的東西 pm2 ，叫進程守候。
05 pm2
說實話一開始聽說這個東西的時候就覺得挺厲害的，因爲沒有接觸過，而且聽起來也有點東西。其實當你用起來之後你就會覺得就是安裝一個npm包一樣的原理。
首先使用它肯定要進行安裝的操作，也是簡單的一句命令就搞定了，在 / 目錄下面執行下面的命令：
npm install -g pm2
然後添加一下到環境變量裏面，我們可以這樣：
vim /etc/profile
在文件的最底部添加：
export NODE_HOME=/root/node-v8.9.1-linux-x64
export PATH=$PATH:$NODE_HOME/bin
退出並保存後重新編譯一下這個文件：
source /etc/profile
到現在爲止我們已經搞定了pm2的安裝以及配置過程了，接下來我們就美滋滋地去啓動我們的項目了。在server文件夾下面，輸入以下的命令：
pm2 start index.js
我們發現即使我們關閉了窗口，程序一樣完美運行。到此爲止我們的配置以及所有的手續都弄完了，大家也應該順利完成了自己的項目吧。
06 小結
其實回想一下整個過程，說簡單也是有一點繁瑣，但是這始終是我們都要去嘗試一下的操作，我一開始接觸的時候連基本的命令都不會，但是沒關係，看教程慢慢搞就好，反正壞了你可以重裝一下。計算機的同學都應該多折騰一下這種繁瑣的配置，因爲你以後也會接觸的，提前鍛鍊一下。
假如一開始我們就順利地執行下來，我想你已經不是一個小白了，而是變成了服務端老鳥了，如果自己對服務器比較感興趣的可以多去學習一個一下linux相關的指令，以後轉成運維工程師也不是不可。
