前端專案部署流程

前端專案部署流程

1.首先我們需要有一臺服務器，這里我用的是阿里云ecs服務器，選擇的服務器作業系統是linux，下面我們開始從0開始部署一個前端專案到服務器上，

步驟：
一、鏈接服務器
(1). 我們需要先在自己電腦鏈接上我們的服務器，我使用的是xshell工具，

# 通過ssh @root[ipaddress] 來鏈接你的服務器
#（將ipaddress替換成你服務器的公網IP地址）
ssh @root[ipaddress]

二、部署一個簡單的靜態頁面
登錄成功之后，我們先來部署一個簡單的html靜態頁面，練練手，這里我是用node.js來啟了一個服務，
首先我們需要在服務器上安裝Node環境：如下

# 列出所有node版本
nvm list-remote

# 選擇一個版本安裝
nvm install v15.0.0

#安裝完成之后，可以通過nvm ls 查看已安裝的所有node版本
nvm ls
#如果想切換Node版本可以通過 nvm use [版本號] 來切換node版本
nvm use v15.0.0
# 安裝完成，我們可以通過 node -v 來查看當前的版本
node -v

問題：這里有一個問題就是，每次服務器重啟之后，都要執行一遍nvm use [node版本號] 命令來重新選擇node版本，否則直接使用node命令，會報識別不了命令的錯誤

接下來我們在隨便一個檔案夾（自行創建）

# 創建命令  mkdir [檔案夾名稱]  
mkdir my_project

創建完成之后，我們進入檔案夾，創建一個main.js 檔案，并且撰寫服務

cd my_project
# 創建main.js檔案    touch [檔案名]  
touch main.js
# 編輯 main.js 檔案   vim [檔案名]
vim main.js

const http = require('http');
const fs = require('fs')
const hostname = '0.0.0.0';
const port = 3000;
const server = http.createServer((req, res) => {
            res.statusCode = 200;
            res.setHeader('Content-Type', 'text/html');
            fs.readFile('./myPage.html','utf-8',function(err,data){
             if(err){
              throw err;
             }
             res.end(data)
            })
});

server.listen(port, hostname, () => {
            console.log(`Server running at http://${hostname}:${port}/`);
});

# 將代碼填入，之后  通過 :wq命令保存并退出
:wq
# 這里我是直接將本地的myPage.html檔案上傳到了服務器的my_project檔案夾內
# xshell 可以直接通過拖動檔案的方式上傳到服務器（很方便）
# 直接 node main.js 
node main.js

接下來我們就可以通過訪問我們的服務器 ip:3000 來訪問我們的服務了

能訪問就說明成功了!

三、部署一個管理系統（我這里是部署了一個vue專案）
這時，我們需要先在服務器上安裝nginx
1.安裝編譯工具以及庫檔案

yum -y install make zlib zlib-devel gcc-c++ libtool  openssl openssl-devel

2.安裝pcre

#pcre的作用是支持nginx的rewrite功能
cd /usr/local/src/
wget http://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz
#編譯安裝
./configure
make && make install

3.安裝nginx,查看官網復制下載鏈接：

#下載nginx安裝包
cd /usr/local/src
wget http://nginx.org/download/nginx-1.16.1.tar.gz

#解壓縮安裝包
tar zxvf nginx-1.16.1.tar.gz
#將nginx-1.16.1.tar.gz檔案夾改名為nginx并且進入安裝包目錄
mv nginx-1.16.1 nginx
cd nginx

#編譯安裝
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-pcre=/usr/local/src/pcre-8.35
#如果出現Permission Denied，請先修改configure檔案的權限 chmod 777 -R configure
make
make install

4.nginx的啟動

#啟動
cd /usr/local/nginx/sbin
./nginx

#重啟
cd /usr/local/nginx/sbin
./nginx -s reload

#判斷組態檔是否正確
cd /usr/local/nginx/sbin
./nginx -t

安裝完成之后，在自己電腦上訪問服務器ip，如果顯示welcom to nginx則表示配置成功
接下來我們再給nginx配置一下開機自啟

cat > /usr/lib/systemd/system/nginx.service << EOF
[Unit]
Description=nginx
After=network.target
  
[Service]
Type=forking
ExecStart=/usr/local/nginx/sbin/nginx
ExecReload=/usr/local/nginx/sbin/nginx -s reload
ExecStop=/usr/local/nginx/sbin/nginx -s stop
PrivateTmp=true
  
[Install]
WantedBy=multi-user.target
EOF

# 注冊開機自啟需要先停用nginx 
/usr/local/nginx/sbin/nginx -s stop
# 注冊
systemctl enable nginx
systemctl start nginx
# 在任意目錄直接使用nginx命令 添加一個軟連接
ln -s  /usr/local/nginx/sbin/nginx /usr/bin/nginx

到此nginx 安裝配置完成

接下來我們可以在本地將我們的vue專案打包

npm run build

然后會生成一個打包檔案，默認是dist檔案夾
再將這個檔案夾進行壓縮生成dist.zip
然后將這個zip檔案直接通過xshell拖動上傳到服務器上
這里需要記住你存放dist.zip檔案的目錄，我是放在 my_project檔案夾下了
接下來我們需要將zip檔案解壓

# 使用 unzip [引數] [待解壓縮檔案]  解壓剛才的dist.zip檔案
# 這里是直接解壓在當前檔案夾
unzip dist.zip

# 如果這一步報錯，則可能是沒有安裝zip命令，直接用yum安裝一下就好了
yum install zip
yum install unzip

接下來需要修改Nginx的conf檔案

#忘記nginx安裝目錄的使用 ps -ef | grep nginx查看，
# yum安裝的默認在/etc/nginx/nginx.conf


vi /usr/local/nginx/conf/nginx.conf

# 修改如下
# 新建一個服務
server {
  # 宣告監聽的埠
  listen 80;
  # 如有多域名映射到同一埠的，可以用server_name 區分，默認localhost
  server_name localhost;

  # 匹配'/'開頭的路徑 注意設定 root路徑是有dist的
  location / {
    # 指定檔案的根目錄，主要結尾不要帶/   我的專案是放再了/usr/local/my_project目錄下
    root /usr/local/my_project/dist;
    # 指定默認跳轉頁面尾 /index.html
    index /index.html;
  }

  # 匹配'/adminApi'開頭的路徑進行跨域 ip和port自行替換
  # adminApi 是vue.config.js中的proxy宣告的
  location /adminApi {
    proxy_pass http://ip:port;
  }
}

接下來要讓我們的nginx配置生效

# 進入nginx 安裝目錄，yum安裝的直接使用nginx代替sbin/nginx
# 檢查組態檔合法性 
sbin/nginx -t
# nginx 熱更新配置
sbin/nginx -s reload

到此就算部署完成，此時可以直接訪問你服務器的ip地址就可以訪問專案了，