[ハンドグリップシリーズの]Jenkins+Docker自動化展開vueプロジェクト

紹介する
このシリーズでは、フロントエンドとバックエンドのプロジェクトを自動化する方法を紹介します.
本編では、自動化した展開の仕方を紹介します.
次のページでは、どう自動化してnodejsプロジェクトを展開しますか?
ここはmac osです.linuxを使えば、多くの下の問題にぶつかりません.
関連するアプリケーション

junnkins

docker

全体の流れ
まず、私達は私達のコンピュータをサーバーに想像します.もちろんサーバがあれば、直接にサーバーにいてもいいです.以下の操作を実行します.
ここは便利のために、直接に私のコンピュータ(mac)をサーバーにしました.この中に穴がたくさんあることを証明します.
以下のローカルとサーバーの違いに注意してください.実はここは全部私達のコンピュータです.

私達はサーバー(ここは私達のmacです)にdocker

をインストールします.

私達はサーバー(ここは私達のmacです)にジャッキー

をdockerでインストールしました.

私達は当地でvueプロジェクトを新築し、github

にプッシュします.

私達はローカルにサーバー上のjunnkinsにアクセスします.つまり、ウェブサイトを開きます.http://localhost:8081 (サーバーならここlocal hostをあなたのサーバーのipに変えます)

私達はjecinsでgithbのプロジェクトを引き延ばしました.junnkinsのインストールディレクトリの中のworkspace/ディレクトリ

までです.

junnkinsは shellを使ってコマンド

を実行しました.

npm install
npm run build

ここでは私達はjenkinsにnodejsプラグインをインストールしたいです.

私達はjecins sshで私達のサーバ

に接続します.
ここではPublish Over SSHプラグインをインストールして、サーバーを配置する必要があります.

は、以下の動作をサーバ(ここは私たちのmac)で実行する

.
私たちのvueプロジェクトをミラーリングに包装します.
このミラーでコンテナを作ります.
dockerをインストールする
ご参考くださいhttps://www.runoob.com/docker...
私はmacです.インストールが成功したら、ステータスバーにdockerのアイコンがあります.
このときコマンドライン入力docker -vインストール成功を説明します.
dockerインストール
余談:あなたもdockerを通してインストールしなくてもいいです.私のもう一つの文章を参照してください.
jenkinsのミラーを検索します
https://hub.docker.com/dockerがイメージを保存するところです.画面は以下の通りです.
私たちはインストールしたいjenkinsのミラーを探してみます.
注意:最初はdockerの公式メンテナンスバージョンですが、長い間更新されていません.古いバージョンです.ですから、ここで二つ目のインストールをします.これはjuninsのメンテナンスです.
ps:コマンドラインで検索することもできます.コマンドはdocker search jenkinsです.
dockerインストール
新しいディレクトリ私はここにいます.
コマンドを実行

docker run --name jenkins_node -d -v /Users/isaacho/Documents/application/docker/jenkins_home:/var/jenkins_home -p 8081:8080 -p 50000:50000 jenkins/jenkins:lts

注意:ここでは上の命令をそのままコピーしないでください./Users/isaacho/Docoments/appication/docker/jecins_ホームを新しいディレクトリに変えます.同様に次の場合／Users/isaacho/Dcuments/appication/docker/jecins_ホームは全部あなたのカタログに変えなければなりません.
インストールプロセスを待っています...http://localhost:8081を開けたら、インストールが成功したと説明します.
同時に私達は/Users/isaacho/Dcuments/appication/docker/jecinsを見ることができます.ホームディレクトリの下で多くのファイルが生成されました.
コマンドの説明:
--name jenkins(u)nodeはあなたの容器の名前を表しています.node
-dはバックグラウンドで動作することを表します.
-v/Users/isaacho/Dcuments/appication/docker/jecins_home:/var/jokins_ホームは私たちが新しく建てたjenkinsを表示します.ホームディレクトリがコンテナに写ります.ホームディレクトリ
-pはポートマップです.
設定
ブラウザはhttp://localhost:8081を開いて、画面は以下の通りです.
私たちは以下のコマンドで管理者のパスワードを取得します.

cat /Users/isaacho/Documents/application/docker/jenkins_home/secrets/initialAdminPassword

クリックして続けます
おすすめのプラグインを選択してプラグインをインストールしてお待ちください.
管理者ユーザを作成
保存をクリックして完了します.
クリックしてjenkinsを使い始めます.
sshプラグインのインストール
システム管理をクリックしますPublish Over SSHを検索してインストールします.
設定ssh
システム管理=>configure system=>を一番下に引く
Test Configrationをクリックして、successが配置成功を説明します.保存をクリックしてください.
成功しなかったら、私達のパソコンがリモートログインを開けていないということです.
ソリューション:
システムプリファレンス設定を選択->共有を選択->リモートログインをクリックしてください.
上のhostnameはここのIPアドレスです.
nodeプラグインをインストール
nodeプラグインはnodeプロジェクトを走る時使うべきで、ここは先にインストールします.
システム管理をクリックします
インストールが完了するまで待つ
インストールnodejsバージョンを選択します.
vueプロジェクトを準備します.
アイテムはすでにgithubにアップロードされました.
vue cliはvueプロジェクトを作成します.
私たちはvue-cli 3を使って直接にvueプロジェクトを作ります.
注意:ここであなたのnodeバージョンが必要です.8.9以上のバージョンが必要です.

vue create vueclidemoapp

書き換える
Hello World.vueコンポーネントを変更して、ページを書き換えて、axiosに参加して要求を送ります.

import axios from 'axios';
axios.get('/api', {
  params: {},
}).then((res) => {
  console.log(res);
});

...

画面は以下の通りです
nginxプロファイルを作成
nginxの配置については、先端が知りたいNgixを見てください.
プロジェクトのルートディレクトリの下に新しいnginx.comを作成します.

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    gzip  on;
    gzip_types text/plain application/javascript text/css;

    #     server 
    server {
        #   
        listen   80;
        #       host 
        server_name  localhost;
        
        #       
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }

    }

    include /etc/nginx/conf.d/*.conf;
}

Docerfileを作成します
プロジェクトのルートディレクトリの下にDocerfileを新規作成します.

FROM nginx

EXPOSE 80

この時あなたのディレクトリ構造はこうです.
このプロジェクトをgithubにアップロードします.
ここでは見せません.このプロジェクトのgithubアドレスはhttps://github.com/repototest...
jecins展開vueプロジェクト
新しいタスク
最初のshell命令はbuild私達のvueプロジェクトで、プロジェクトのルートディレクトリの下でdistディレクトリを生成します.

echo $PATH
node -v
npm -v
npm install
npm run build

第二のshellコマンドは、dockerのミラーリングと走dockerサービスを構築するために使用されます.

docker stop vuenginxapp || true \
 && docker rm vuenginxapp || true \
 && cd /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp  \
 && docker build  -t vuenginxapp  . \
 && docker run -d -p 8083:80 --name vuenginxapp -v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/dist:/usr/share/nginx/html -v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/nginx.conf:/etc/nginx/nginx.conf vuenginxapp

docker stop vuenginxappは、vuenginxap容器を停止するために使用される.sudo docker rm vuenginxappは、vuenginxap容器を削除するために使用される.cd /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoappは私達のプロジェクトディレクトリに入ります.ここで自分のディレクトリに変えなければなりません.つまり(yourpath)/jenkins_home/workspace/vueclidemoappです.yourpathは上の方にあるjecins_です.ホームディレクトリ時のディレクトリdocker build -t vuenginxapp .は、buildイメージを表し、名前はvuenginxapです.docker run -d -p 8083:80 --name vuenginxapp -v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/dist:/usr/share/nginx/html -v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/nginx.conf:/etc/nginx/nginx.conf vuenginxappは私達の上のvuenginxapがミラー生成容器であることを示しています.
詳細な説明-dは、バックグラウンドで実行される.-p 8083:80はコンテナの80ポートのマッピングを私達が訪問した8083ポートです.80ポートはinxデフォルトのポート番号です.--name vuenginxapp容器名はvuenginxapです.-v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/dist:/usr/share/nginx/html私たちが生成したdistディレクトリをコンテナに載せる/usr/share/inx/htmlは、nginxのデフォルトのhttpディレクトリです.-v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/nginx.conf:/etc/nginx/nginx.confは、私たちのnginx.comをコンテナの/etc/inx/nginx.com nfにマウントします./etc/nginx/nginx.com nfはnginxデフォルトのプロファイルです.vuenginxappは私達の鏡像の名前です.
起こり得る問題

dockerはコマンドではありません.
この問題が発生した原因は、私達がsshでmacを接続する時、命令行は/usr/binの中の命令しか使えませんが、私達のdocker命令は/usr/local/binの中に置いたので、見つけられません.解決策は/usr/local/bin/dockerを上のdockerの代わりにします.
すなわち

/usr/local/bin/docker stop vuenginxapp || true \
 && /usr/local/bin/docker rm vuenginxapp || true \
 && cd  /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp  \
 && /usr/local/bin/docker build  -t vuenginxapp  . \
 && /usr/local/bin/docker run -d -p 8083:80 --name vuenginxapp -v  /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/dist:/usr/share/nginx/html -v  /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/nginx.conf:/etc/nginx/nginx.conf vuenginxapp

構築項目
クリックしてすぐに構築します
部署を待つ.
この小さい円をクリックしてコンソールの出力を見ることができます.
私達のプロジェクトが(yourpath)/jenkins_home/workspaceに引っ張られたのが見えます.
アクセスhttp://localhost:8083/
これで私たちはvueプロジェクトの展開に成功しました.
起こり得る問題

Gethttps://registry-1.docker.io/v2/: net/http:request cance led while waiting for connection(Cliennt.Timeout exceed while awaiting headers)

この文章は1文の多発プラットフォームArtPubから自動的に発表されます.