【全スタックプロジェクトオンライン(vue+node+mongodb)】05.vueプロジェクトオンライン(webhooks pm 2 docker自動化オンライン)

プロジェクトのオンライン常用方案:
ローカルコードパッケージを圧縮してサーバーにアップロードし、GitHubから適切な場所に解凍してgit webhooks自動化オンライン構成pm 2自動化オンラインdocker自動化オンライン
vnshopプロジェクトを事例として
https://github.com/itguide/vn...
ローカルのコードを圧縮してサーバーにアップロードし、対応する場所に解凍します.
ローカルのコードを圧縮してサーバーにアップロードします
私たちのvueプロジェクトのclientでは、次のコマンドを実行します.

npm run build 

このコマンドはvueプロジェクトを生産環境に必要なファイルにコンパイルするために使用します.
distフォルダを生成し、このフォルダをzip形式のファイルに圧縮します.
xshellでサーバにアップロード
ステップ1:lrzszのインストール

apt-get install lrzsz -y

sz:選択したファイルをローカルマシンrzに送信:このコマンドを実行するとファイル選択ウィンドウがポップアップされ、ローカル選択ファイルからLinuxサーバrzにアップロードされます.szはLinux/UnixとWindowsでZModemファイル転送を行うコマンドラインツールです.
ステップ2:ローカルの圧縮パッケージのプロジェクトファイルをrzコマンドでサーバにアップロードする
/home/wwwroot/ディレクトリで実行

cd /home/wwwroot/

rzコマンドを実行し、ボックスを飛び出して、ローカルでサーバにアップロードする必要があるファイルを選択します.

rz

サーバーで実行するコマンドは、どこへアップロードしますか?
ステップ3:アップロードしたアイテムを解凍してサイトアクセスフォルダにコピーする
Webサイト、仮想ホストの追加

lnmp vhost add

ネットの追加詳細はhttps://segmentfault.com/a/11...
アップロードした圧縮パッケージを解凍する:

 unzip dist.zip

解凍後、distフォルダを生成するには、このフォルダ内のすべてのファイルをvnにコピーする必要があります.itnote.cnフォルダに行き、以下のコマンドを実行します.

cp -r dist/* vn.itnote.cn

cpはコピー-rは深さコピーで、中がファイルであれば、distフォルダの中のすべてのファイルを後ろのvnにコピーする必要があります.itnote.cnフォルダ、コピー先
GitHubからプロジェクトを引き出して対応する場所へ
ステップ1:ドメイン名をこのホストにバインドし、仮想ホストを作成します.

lnmp vhost add

         https://segmentfault.com/a/1190000011791001

###ステップ2:プロジェクトをホストに引き寄せる

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

ステップ3: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自動化オンラインの構成
pm 2自動化オンラインの構成
dockerを使用してオンラインを自動化