将VUE項目部署到ECS伺服器上

ECS使用體驗

1、個人介紹

我是一名大二的學生，近期實驗室開發了實驗室管理系統，老師讓我做一個介紹系統的首頁，首頁做好了又讓搞部署，友善用域名來通路，說參加比賽更有底氣，我現在大二，年輕氣盛，之前從來沒有部署過，想着也不是什麼難事，結果要租伺服器，伺服器需要資金，我還沒參加比賽就要先投資了，正好看見了阿裡雲這個開發者計劃，深得我心，于是便完成了任務免費領了一個。

2、項目部署

本次項目是一個vue項目，部署方式采用build打包成靜态資源，然後使用nginx。

2.1 nginx安裝

#需要安裝前置依賴，一鍵安裝所有的前置依賴
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
 
[root@iZ0jl0ffkpvo74x04pmneoZ local]# tar -zxvf nginx-1.18.0.tar.gz 

 #注意，解壓之後不要把nginx-1.18.0的名字改為nginx，因為在配置nginx之後，會自動生成一個nginx檔案夾，避免重名
[root@iZ0jl0ffkpvo74x04pmneoZ local]# cd nginx-1.18.0
[root@iZ0jl0ffkpvo74x04pmneoZ nginx-1.18.0]# ./configure
[root@iZ0jl0ffkpvo74x04pmneoZ nginx-1.18.0]# make
[root@iZ0jl0ffkpvo74x04pmneoZ nginx-1.18.0]# make install

#傳回上一級，已經多出了一個nginx檔案夾
#進入nginx目錄
[root@centos7 nginx]# ls
conf  html  logs  sbin
[root@iZ0jl0ffkpvo74x04pmneoZ nginx]# cd sbin
[root@iZ0jl0ffkpvo74x04pmneoZ sbin]# ls
nginx           

2.2 nginx基本指令

常用指令

在sbin目錄下執行相應的nginx指令即可

啟動

[root@iZ0jl0ffkpvo74x04pmneoZ sbin]# ./nginx

退出

./nginx -s quit

停止

./nginx -s stop

重新開機

./nginx -s reload

檢視配置檔案所在的目錄

./nginx -t

檢視版本資訊

./nginx -v #檢視幫助資訊 ./nginx -h

檢視運作狀态

ps -ef | grep nginx

#檢視nginx程序 cat nginx.pid

2.3 配置檔案

http子產品的指令

alias 别名                    設定别名
keepalive_timeout [time]     設定逾時連接配接時間，預設時間75s，time機關為秒
resolver_timeout [time]      解析逾時時間，預設值為30s           

server子產品指令

server_name 伺服器名稱             設定伺服器名稱
listen 端口号                     設定監聽的端口号
charset 字元集                    設定字元集           

設定通路路徑

2.4 将本地項目build打包

使用 npm run build 指令打包vue項目，會在dist檔案中生成相關的資源，最後将dist檔案夾發到伺服器上，然後再把nginx的配置檔案中root後面設定伺服器中dist的檔案路徑即可。

3.通路

在ECS控制台中找到安全組，開方對應的nginx端口号即可

#需要安裝前置依賴，一鍵安裝所有的前置依賴
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
 
[root@iZ0jl0ffkpvo74x04pmneoZ local]# tar -zxvf nginx-1.18.0.tar.gz 

 #注意，解壓之後不要把nginx-1.18.0的名字改為nginx，因為在配置nginx之後，會自動生成一個nginx檔案夾，避免重名
[root@iZ0jl0ffkpvo74x04pmneoZ local]# cd nginx-1.18.0
[root@iZ0jl0ffkpvo74x04pmneoZ nginx-1.18.0]# ./configure
[root@iZ0jl0ffkpvo74x04pmneoZ nginx-1.18.0]# make
[root@iZ0jl0ffkpvo74x04pmneoZ nginx-1.18.0]# make install

#傳回上一級，已經多出了一個nginx檔案夾
#進入nginx目錄
[root@centos7 nginx]# ls
conf  html  logs  sbin
[root@iZ0jl0ffkpvo74x04pmneoZ nginx]# cd sbin
[root@iZ0jl0ffkpvo74x04pmneoZ sbin]# ls
nginx           

常用指令

在sbin目錄下執行相應的nginx指令即可

啟動

[root@iZ0jl0ffkpvo74x04pmneoZ sbin]# ./nginx

退出

./nginx -s quit

停止

./nginx -s stop

重新開機

./nginx -s reload

檢視配置檔案所在的目錄

./nginx -t

檢視版本資訊

./nginx -v #檢視幫助資訊 ./nginx -h

檢視運作狀态

ps -ef | grep nginx

#檢視nginx程序 cat nginx.pid

alias 别名                    設定别名
keepalive_timeout [time]     設定逾時連接配接時間，預設時間75s，time機關為秒
resolver_timeout [time]      解析逾時時間，預設值為30s           

server_name 伺服器名稱             設定伺服器名稱
listen 端口号                     設定監聽的端口号
charset 字元集                    設定字元集