阿里雲伺服器部署web專案全過程

大灰狼的小綿羊哥哥發表於2020-09-23
阿里伺服器Web

 

我們在本地編寫完Node.js專案，需要將檔案打包上傳到雲伺服器，其他人才可以通過url地址來訪問和瀏覽我們編寫的程式，在申請、配置阿里雲ECS伺服器的時候也是踩坑無數，看了網上很多大神的文章，自己也嘗試彙總整理了一下，文中涵蓋的知識點比較多，大概包含如下幾個方面：

  • 申請阿里雲免費伺服器
  • 安裝node.js
  • 安裝Nginx伺服器
  • 安裝mongoDB資料庫
  • 安裝pm2程式管理工具
  • 安裝本地FTP
  • 上線移動端專案

之前還寫過一篇《阿里雲伺服器崩潰自救指南》，如果在本地誤刪了某些檔案導致伺服器崩潰，可以參考我總結的步驟嘗試恢復一下。

注：本人使用的是MacOS系統，如果是windows環境，文中的部分操作會有所不同。

申請阿里雲免費伺服器

註冊阿里雲賬號

在首頁選擇你的登入方式，可以通過阿里旗下的第三方服務登入。

image

這裡我使用支付寶登陸，掃碼進入頁面後點選授權即可。

image

如果沒有阿里雲賬號的話，可以輸入會員名和手機號碼進行快速註冊。

image

註冊之後進入到ECS管理控制檯頁面

image

在最新活動中找到新手上路，我們可以申請阿里雲免費套餐，試用時長為一個月。

image

image

個人實名認證

選擇個人版，申請之前需要進行個人實名認證。

image

點選個人實名認證連結進入實名認證頁面，選擇個人實名認證。

image

推薦個人支付寶授權認證，跳轉頁面後輸入家庭住址就可以完成認證了。

image

申請阿里雲免費伺服器

認證完成後點選立即搶購按鈕申請免費雲伺服器

image

點選免費領取按鈕，選擇Centos/ 7.6 64位作業系統。

 

image

勾選同意協議，點選立即領取按鈕，即可領取成功。

 

image

此時再進入管理控制檯頁面就可以看到有一臺雲伺服器正在執行

image

重置例項密碼

在更多中找到重置例項密碼，點選設定密碼。

image

該密碼不是你的阿里雲賬號登入密碼，而是你的雲伺服器訪問密碼，必須由大寫字母、小寫字母、數字、特殊符號中的三項構成。

image

重啟例項

重置例項之後，點選右上角重啟例項。

image

在彈出的頁面中點選確定按鈕

image

重啟例項之後會顯示停止中狀態，大概需要等待30秒。

image

配置安全組

在側邊欄網路與安全中找到安全組，點選右邊的配置規則。

image

埠範圍填入：1/60000，為了使用更多服務，如果這個埠範圍填的太小了，像mongodb這種27017埠的資料庫就無法安裝。授權物件為0.0.0.0/0，為了讓所有埠都可以訪問。

image

點選確定儲存，就可以在頁面中看到我們配置好的安全組。

image

遠端連線

可以使用它自帶的遠端連線，連線伺服器。

image

點選遠端連線，系統會給你提供一個密碼用於遠端連線你的雲伺服器，該密碼只出現一次，出現的時候需要記錄下來。

image

在遠端連線中使用者名稱為：root，點選回車輸入之前重置過的例項訪問密碼（預設輸入密碼的時候是不顯示的，輸入完成後點選回車即可）。

image

但是我們一般不推薦在遠端連線中訪問伺服器，原因是：如果超過一分鐘沒有操作就會自動斷開連線，需要重新輸入遠端連線密碼，比較繁瑣。而且在它的控制檯中無法複製貼上指令，只能通過其視窗右上角的複製命令輸入來操作，比較麻煩。

image

我們可以在本地終端cmd中通過ssh命令來訪問雲伺服器

 

git ssh root@39.96.84.220(你的公網IP)

可以在例項的配置資訊中找到公網IP

image

連線成功後執行檢視檔案命令：

 

cd /
ls

image

安裝node.js

執行yum命令在雲伺服器上安裝Node.js

 

sudo yum install nodejs

安裝成功後顯示完畢，執行node -v檢視版本號：

image

安裝Nginx伺服器（靜態伺服器）

具體操作步驟出自這篇文章：

《CentOS 7 下安裝 Nginx》

https://www.linuxidc.com/Linux/2016-09/134907.htm

Nginx是一款自由的、開源的、高效能的HTTP伺服器和反向代理伺服器；同時也是一個IMAP、POP3、SMTP代理伺服器；Nginx可以作為一個HTTP伺服器進行網站的釋出處理，另外Nginx可以作為反向代理進行負載均衡的實現。

1. gcc 安裝

安裝 nginx 需要先將官網下載的原始碼進行編譯，編譯依賴 gcc 環境，如果沒有 gcc 環境，則需要安裝：

 

yum install gcc-c++

安裝成功：

image

2. PCRE pcre-devel 安裝

PCRE(Perl Compatible Regular Expressions) 是一個Perl庫，包括 perl 相容的正規表示式庫。nginx 的 http 模組使用 pcre 來解析正規表示式，所以需要在 linux 上安裝 pcre 庫，pcre-devel 是使用 pcre 開發的一個二次開發庫。nginx也需要此庫。命令：

 

yum install -y pcre pcre-devel

安裝成功：

image

3. zlib 安裝

zlib 庫提供了很多種壓縮和解壓縮的方式， nginx 使用 zlib 對 http 包的內容進行 gzip ，所以需要在 Centos 上安裝 zlib 庫。

 

yum install -y zlib zlib-devel

安裝成功：

image

**3. **OpenSSL 安裝

OpenSSL 是一個強大的安全套接字層密碼庫，囊括主要的密碼演算法、常用的金鑰和證書封裝管理功能及 SSL 協議，並提供豐富的應用程式供測試或其它目的使用。
nginx 不僅支援 http 協議，還支援 https（即在ssl協議上傳輸http），所以需要在 Centos 安裝 OpenSSL 庫。

 

yum install -y openssl openssl-devel

安裝成功：

image

4.下載nginx安裝包

（1）第一種方式：直接下載.tar.gz安裝包，nginx官網地址：https://nginx.org/en/download.html

image

（2）第二種方式（推薦）：使用wget命令下載

 

wget -c https://nginx.org/download/nginx-1.10.1.tar.gz

我下載的是1.10.1版本，這個是目前的穩定版。

image

5. 解壓

依然是直接命令：

 

tar -zxvf nginx-1.10.1.tar.gz
cd nginx-1.10.1

6. 配置

在 nginx-1.10.1 版本中你就不需要去配置相關東西，使用預設配置就可以了。

 

./configure

7. 編譯安裝

 

make
make install

查詢安裝路徑：

 

whereis nginx

image

8. 啟動、停止、重啟nginx

 

cd /usr/local/nginx/sbin/
./nginx

查詢nginx程式：

 

ps aux|grep nginx

image

啟動成功後，在瀏覽器可以看到這樣的頁面：

image

./nginx -s stop：此方式相當於先查出nginx程式id再使用kill命令強制殺掉程式。
./nginx -s quit：此方式停止步驟是待nginx程式處理任務完畢進行停止。

重啟nginx

（1）第一種方式：先停止再啟動（推薦）：
對 nginx 進行重啟相當於先停止再啟動，即先執行停止命令再執行啟動命令。如下：

 

./nginx -s quit
./nginx

（2）第二種方式：重新載入配置檔案：
當 nginx的配置檔案 nginx.conf 修改後，要想讓配置生效需要重啟 nginx，使用-s reload不用先停止 ngin x再啟動 nginx 即可將配置資訊在 nginx 中生效，如下：

 

./nginx -s reload

9. 開機自啟動

即在rc.local增加啟動程式碼就可以了。

 

vi /etc/rc.local

輸入字母i出現—INSERT—，按鍵盤上下鍵控制游標

image

將如下程式碼複製貼上

 

/usr/local/nginx/sbin/nginx

按esc鍵退出，輸入強制儲存退出命令：

 

:wq!

到這裡，nginx就安裝完畢了，啟動、停止、重啟、開機自啟動操作也都完成了。

image

安裝mongoDB資料庫

具體操作步驟出自這篇文章：

《centos7安裝MongoDB3.4》

https://www.cnblogs.com/web424/p/6928992.html

MongoDB 是一個介於關聯式資料庫和非關聯式資料庫之間的產品，是非關聯式資料庫當中功能最豐富，最像關聯式資料庫的。他支援的資料結構非常鬆散，是類似json的bson格式，因此可以儲存比較複雜的資料型別。Mongo最大的特點是他支援的查詢語言非常強大，其語法有點類似於物件導向的查詢語言，幾乎可以實現類似關聯式資料庫單表查詢的絕大部分功能，而且還支援對資料建立索引。

1. 建立yum原始檔

 

vim /etc/yum.repos.d/mongodb-org-3.4.repo

2. 新增以下內容

 

[mongodb-org-3.4]  
name=MongoDB Repository  
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.4/x86_64/  
gpgcheck=1  
enabled=1  
gpgkey=https://www.mongodb.org/static/pgp/server-3.4.asc

字母i代表INSERT寫入

image

複製上面內容貼上後按esc，輸入

 

：（冒號）wq！（感嘆號）

image

強制儲存並退出

image

3. 安裝MongoDB

安裝命令：

 

yum -y install mongodb-org

安裝完成後顯示：

image

4. 安裝完成後,檢視mongo安裝位置

 

whereis mongod

image

檢視修改配置檔案 的命令是：vim /etc/mongod.conf

5. 啟動mongodb

 

systemctl start mongod.service

順便說一下停止mongodb的命令是 ：systemctl stop mongod.service

6. 檢視mongodb的狀態

 

systemctl status mongod.service

顯示active（running）說明已經成功開啟。

image

7. 停止防火牆

CentOS 7.0預設使用的是firewall作為防火牆，這裡改為iptables防火牆。

外網訪問需要關閉firewall防火牆：

 

systemctl stop firewalld.service

8. 禁止防火牆開機啟動

 

systemctl disable firewalld.service

9. 設定開機啟動

 

systemctl enable mongod.service

img

10. 啟動Mongo shell檢視資料庫

執行完以上操作步驟後輸入命令：mongo，檢視資料庫show dbs。

image

11. 設定mongodb遠端訪問

設定完之後可以在本地連線資料庫

輸入

 

vim /etc/mongod.conf

編輯mongod.conf配置檔案，找到bindIP，在前面按i輸入#註釋掉這一行，輸入:wq!儲存退出。

image

12. 重啟mongodb

 

systemctl restart mongod.service

image

安裝pm2程式管理工具

PM2是node程式管理工具，可以利用它來簡化很多node應用管理的繁瑣任務，如效能監控、自動重啟、負載均衡等。

當我們在伺服器中啟動node服務時如果直接通過npm start或者node index.js啟動，則一旦退出ssh遠端登入，或者在本地關閉終端則服務就會停止執行，所以我們要安裝pm2這個node程式管理工具，通過pm2 start來開啟程式就不會出現這個問題了。

全域性安裝命令：

 

npm install -g pm2

image

安裝成功後執行pm2 list檢視所有程式狀態

image

安裝本地FTP

這裡推薦使用FileZilla，這是一款免費、開源、跨平臺的FTP軟體，mac系統windows系統的使用者都可以放心食用。這裡我們使用SFTP連線，埠號預設值是22.

image

連線成功後會列出root下的目錄

image

上線移動端專案

1. 修改專案配置檔案

找到專案的Vue-config.js配置檔案，在module.exports中將publicPath: 改為：'/v-douban/'。

image

同時本地請求資料的路徑也需要加上/v-douban

image

2. 打包檔案

執行yarn build將專案打包成dist檔案包

3. 連線FTP伺服器，修改nginx

進入/usr/local/nginx/conf目錄，傳輸nginx.config檔案到本地。

image

修改nginx.config檔案，配置資料介面代理。

 

location /api/db {
            proxy_pass http://47.96.0.211:9000/db;
        } 

        location /data/my {
            proxy_pass http://118.31.109.254:8088/my;
        } 

        location /douban/my {
            proxy_pass http://47.111.166.60:9000/my;
        }

上傳新的nginx.config檔案到伺服器，覆蓋原檔案。

image

在終端連線資料庫，並且重啟nginx伺服器。

 

./nginx -s reload

image

進入/usr/local/nginx/html目錄建立一個v-douban資料夾

image

將打包後的dist資料夾中的所有檔案上傳到伺服器

image

傳輸完成後，即可在網頁中訪問上線專案http://39.96.84.220/v-douban

image

線上瀏覽效果：

image

 

image



作者：視覺派Pie
連結：https://www.jianshu.com/p/3693dad9b574
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

相關文章