【全棧項目上線（vue+node+mongodb）】05.vue項目上線（webhooks pm2 docker 自動化上線）

項目上線經常使用方案：

把本地的代碼打包壓縮一份上傳到服務器，而後解壓到相應地方
從GitHub拉去到相應的地方
配置git webhooks 自動化上線
配置 pm2 自動化上線
使用docker 自動化上線

咱們以vnshop項目做爲案例

https://github.com/itguide/vn...

把本地的代碼打包壓縮一份上傳到服務器，而後解壓到相應地方

把本地的代碼壓縮一下，而後上傳到服務器

在咱們的vue項目裏面的client裏面執行如下命令

npm run build

這個命令用來把vue項目編譯成生產環境須要的文件

生成一個dist 文件夾，把這個文件夾，壓縮成zip格式的文件

而後經過xshell 上傳到服務器

第一步：安裝 lrzsz

apt-get install lrzsz -y

sz：將選定的文件發送到本地機器
rz：運行該命令會彈出一個文件選擇窗口，從本地選擇文件上傳到Linux服務器
rz，sz是Linux/Unix同Windows進行ZModem文件傳輸的命令行工具，

第二步：把本地的壓縮打包的項目文件經過rz命令上傳到服務器

在 /home/wwwroot/ 目錄裏面執行

cd /home/wwwroot/

執行rz命令，而後跳出一個框，讓你選擇本地須要上傳到服務器的文件。

rz

在服務器哪執行的命令，就上傳到哪去

第三步：把上傳後的項目，解壓複製到網站訪問的文件夾裏面

添加一個網站，虛擬主機

lnmp vhost add

添加網詳細請看 https://segmentfault.com/a/11...

把上傳的壓縮包解壓：

unzip dist.zip

解壓完以後，生成一個 dist文件夾
須要把這個文件夾裏面的全部文件複製到 vn.itnote.cn文件夾裏面去，執行如下命令

cp -r dist/* vn.itnote.cn

cp 是拷貝 -r 是深度拷貝，若是裏面是文件，須要用 -r /* 表明把dist 文件夾裏面的全部文件都拷貝 後面的vn.itnote.cn 文件夾，是要拷貝的目的地

從GitHub拉取項目到相應的地方

第一步：域名綁定到這個主機，而且建立一個虛擬主機

lnmp vhost add

建立詳細過程請看 https://segmentfault.com/a/1190000011791001

### 第二步：把項目拉取到主機

cd /home/wwwroot

git clone https://github.com/itguide/vnshop10.git vnshop

npm install -g cnpm --registry=https://registry.npm.taobao.org

cd /home/wwwroot/vnshop/client

cnpm i

npm run build

第三步：修改Nginx 配置

修改配置

別傻乎乎的複製，後面要修改本身須要配置的文件

vim /usr/local/nginx/conf/vhost/vx.itnote.cn.conf

server
    {
        listen 80;
        #listen [::]:80;
        server_name vx.itnote.cn ;
        index index.html index.htm index.php default.html default.htm default.php;
        root  /home/wwwroot/vnshop/client/dist/;

        include none.conf;
        #error_page   404   /404.html;

        # Deny access to PHP files in specific directory
        #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; }

        include enable-php.conf;

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /.well-known {
            allow all;
        }

        location ~ /\.
        {
            deny all;
        }

        access_log  /home/wwwlogs/vx.itnote.cn.log;
    }

記得重啓Nginx 配置哦

重啓命令

/etc/init.d/nginx restart

最後在瀏覽器訪問 vx.itnote.cn

稍後即將奉上

配置git webhooks 自動化上線

配置 pm2 自動化上線

使用docker 自動化上線