當前位置:首頁 » 網頁前端 » docker搭建前端開發環境
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

docker搭建前端開發環境

發布時間: 2022-12-19 12:22:30

A. Docker 部署前端項目流程

docker images --- 查看所以鏡像

docker search 鏡像名 --- 搜索相關鏡像

docker images | grep 鏡像名模糊搜索

docker pull(-a) 鏡像名:版本號 --- 拉取鏡像,-a pull all

docker push 192.168.0.100:5000/ubuntu --- 推送鏡像庫到私有源

docker rmi(-f) 鏡像名:版本號/鏡像 ID --- 刪除鏡像 (加上 -f 參數 強制刪除)

docker rmi $(docker images -q)---刪除所有鏡像

docker ps --- 查看所以的容器

docker ps -a --- 查看所有容器的狀態

docker exec -it 容器 name /bin/sh --- 進入容器

exit --- 退出容器

docker start/stop id/name[name...] --- 啟動/停止某個(多個)容器

docker kill name[name...] --- 強制中斷

docker restart name[name...] --- 重啟

docker pause name --- 暫停

docker unpause name --- 繼續

docker rm name[name...] --- 移除容器

docker rmi (-f) name[name...] --- 移除鏡像(-f:強制移除運行中容器)

一鍵刪除所有 tag 為 none 的鏡像

第一步:連接遠程鏡像倉庫 (docker login ip 地址:埠號)
第二步:獲取遠程倉庫中的鏡像 (docker push 鏡像名)
第三步:獲取倉庫中所有鏡像 (docker images )
第四步:編寫自己的 dockerfile 文件
第五步:build 當前鏡像中的 dockerfile 文件,生成新的 dockerfile 文件。 (docker build -t 鏡像名:tag . )
第六步:本地測試是否 build 成功 【本步驟可省略】, (docker run -p 8081:80 -d --name 容器名 鏡像名:tag)

第七步:查看當前運行的容器 (docker ps )
第八步:測試成功後上傳鏡像, (docker push 鏡像名:tag)
第九步:查看倉庫中的所有鏡像 (docker images)

本地環境

最後終端出現

B. 如何配置一個 Docker 化持續集成的 PHP 開發環境

首先,我們得知道什麼才是好的開發環境, 對於我而言,一個好的開發環境需要具備以下幾個特點:

可隨意使用。我必須可以隨意刪除和創建新的環境。
快速啟動。我想要用它工作時候,它立馬就能用。
易於更新。在我們行業中,事物發展變化非常快,必須能讓我很容易將我的開發環境更新到新的軟體版本。

而Docker都支持以上這些特點,甚至更多。你幾乎可以即時銷毀和重建容器,而更新環境只需要重建你當前使用的鏡像即可。

什麼是PHP開發環境
目前Web應用錯綜復雜,PHP開發環境需要很多的東西,為了保證環境的簡單性,需要做各種各樣的限制。
我們這次使用Nginx、PHP5-FPM、Mysql來運行Synmfony項目。由於在容器中運行命令行會更復雜,所以這方面的內容我會放到下一篇博客中再說。

Pet 與 Cattle
另一個我們要討論的重點是:我們要把開發環境部署在多容器還是單容器中。 兩種方式各有優點:

單容器易於分發、維護。因為它們是獨立的,所有的東西都運行在同一個容器中,這點就像是一個虛擬機。但這也意味著,當你要升級其中的某樣東西(比如PHP新版本)的時候, 需要重新構建整個容器。
多容器可以在添加組件時提供更好的模塊化。因為每個容器包含了堆棧的一部分:Web、PHP、MySQL等,這樣可以單獨擴展每個服務或者添加服務,並且不需要重建所有的東西。

因為我比較懶,加上我需要在我的筆記本上放點別的內容,所以,這里我們只介紹單個容器的方法。

初始化工程
首先要做的是初始化一個新的Symfony工程. 推薦的方法是用composer的create-project命令。本來可以在工作站上安裝composer,但是那樣太簡單了。這次我們通過Docker來使用它。
我之前發過一篇關於Docker命令的文章:make docker commands(好吧,我說謊了,我本來把它寫在這篇文章中了,然後覺得把它獨立出來會比較好)。

不管怎麼樣,你可以讀一下。接下來如果還沒有composer命令的話,你可以創建一個屬於自己的composer 別名。

$ alias composer="docker run -i -t -v \$PWD:/srv ubermuda/composer"

現在你可以初始化Symfony工程了:

$ composer create-project symfony/framwork-standard-edition SomeProject

帥呆了!下面來點實在的工作。(省略了博主自娛自樂的一堆balabla....原文:Awesome. Give yourself a high-five, get a cup of coffee or whatever is your liquid drug of choice, and get ready for the real work.)

容器
構建一個運行標准Symfony項目且自給自足的容器相當容易,只需要安裝好常用的Nginx、PHP5-FPM和MySQL-Server即可,然後把預先准備好的Nginx的虛擬主機配置文件扔進去,再復制一些配置文件進去就完事了。

本容器的源代碼在GitHub上的 ubermuda/docker-symfony倉庫中可以找到。 Dockerfile 是Docker構建鏡像要用到的配置文件,我們來看一下:

FROM debian:wheezy

ENV DEBIAN_FRONTEND noninteractive

RUN apt-get update -y

RUN apt-get install -y nginx php5-fpm php5-mysqlnd php5-cli mysql-server supervisor

RUN sed -e 's/;daemonize = yes/daemonize = no/' -i /etc/php5/fpm/php-fpm.conf

RUN sed -e 's/;listen\.owner/listen.owner/' -i /etc/php5/fpm/pool.d/www.conf

RUN sed -e 's/;listen\.group/listen.group/' -i /etc/php5/fpm/pool.d/www.conf

RUN echo "\ndaemon off;" >> /etc/nginx/nginx.conf

ADD vhost.conf /etc/nginx/sites-available/default

ADD supervisor.conf /etc/supervisor/conf.d/supervisor.conf

ADD init.sh /init.sh

EXPOSE 80 3306

VOLUME ["/srv"]

WORKDIR /srv

CMD ["/usr/bin/supervisord"]

我們通過擴展 debian:wheezy 這個基礎鏡像開始,然後通過一系列的sed命令來配置Nginx和PHP5-FPM。

RUN sed -e 's/;daemonize = yes/daemonize = no/' -i /etc/php5/fpm/php-fpm.conf

RUN sed -e 's/;listen\.owner/listen.owner/' -i /etc/php5/fpm/pool.d/www.conf

RUN sed -e 's/;listen\.group/listen.group/' -i /etc/php5/fpm/pool.d/www.conf

RUN echo "\ndaemon off;" >> /etc/nginx/nginx.conf

這里我們要做兩件事。 首先配置PHP5-FPM和Nginx讓他們在前台運行以便supervisord可以追蹤到他們。
然後,配置PHP5-FPM以指定的用戶運行Web-Server,並處理好文件許可權。

接下來需要安裝一組配置文件,首先是Nginx的虛擬主機配置文件vhost.conf:

server {

listen 80;

server_name _;

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

error_log /var/log/nginx/error.log;

root /srv/web;

index app_dev.php;

location / {

try_files $uri $uri/ /app_dev.php?$query_string;

}

location ~ [^/]\.php(/|$) {

fastcgi_pass unix:/var/run/php5-fpm.sock;

include fastcgi_params;

}

}

因為我們不需要域名,所以把server_name設成了_(有點像perl的$_佔位符變數), 並配置根目錄(document root)為/svr/web, 我們會把應用程序部署在/srv下,剩下的就是標準的Mginx + PHP5-FPM配置.

因為一個容器每次只能運行一個程序, 我們需要supervisord(或者任何別的進程管理器,不過我比較中意supervisord)。幸運的是, 這個進程管理器會產生我們需要的所有進程!下面是一小段supervisord的配置:

[supervisord]

nodaemon=true

[program:nginx]

command=/usr/sbin/nginx

[program:php5-fpm]

command=/usr/sbin/php5-fpm

[program:mysql]

command=/usr/bin/mysqld_safe

[program:init]

command=/init.sh

autorestart=false

redirect_stderr=true

redirect_stdout=/srv/app/logs/init.log

這里我們需要做的是定義所有的服務, 加上一個特殊的program:init進程,它不是一個實際的服務,而是一個獨創的運行啟動腳本的方式。

這個啟動腳本的問題在於,它通常需要先啟動某些服務。比如,你可能要初始化一些資料庫表,但前提是你得先把MySQL跑起來,一個可能的解決辦法是,在啟動腳本中啟動MySQL,然後初始化表,然後為了防止影響到supervisord的進程管理,需要停掉MySQL,最後再啟動supervisord。

這樣的腳本看起來類似下面這樣:

/etc/init.d/mysql start

app/console doctrine:schema:update --force

/etc/init.d/mysql stop

exec /usr/bin/supervisord

看起來丑爆了有木有,咱換種方式,讓supervisor來運行它並且永不重啟。
實際的init.sh腳本如下:

#!/bin/bash

RET=1

while [[ RET -ne 0 ]]; do

sleep 1;

mysql -e 'exit' > /dev/null 2>&1; RET=$?

done

DB_NAME=${DB_NAME:-symfony}

mysqladmin -u root create $DB_NAME

if [ -n "$INIT" ]; then

/srv/$INIT

fi

腳本先等待MySQL啟動,然後根據環境變數DB_NAME創建DB,默認為symfony, 然後在INIT環境變數中查找要運行的腳本,並嘗試運行它。本文的結尾有說明如何使用這些環境變數。

構建並運行鏡像
萬事俱備只欠東風。我們還要構建Symfony Docker鏡像, 使用docker build命令:

$ cd docker-symfony

$ docker build -t symfony .

現在,可以使用它來運行你的Symfony工程了:

$ cd SomeProject

$ docker run -i -t -P -v $PWD:/srv symfony

我們來看看這一連串的選項分別是幹嘛的:

-i 啟動交互(interactive)模式, 也就是說,STDIO(標准輸入輸出)連接到了你當前的終端上。當你要接收日誌或者給進程發送信號時,它很有用。
-t 為容器創建一個虛擬TTY, 它跟-i是好基友,通常一起使用。
-P 告訴Docker守護進程發布所有指定的埠, 本例中為80埠。
-v $PWD:/srv 把當前目錄掛載到容器的/srv目錄。掛載一個目錄使得目錄內容對目標掛載點可用。

現在你還記得之前提到的DB_NAME和INIT環境變數了吧,幹嘛用的呢:用於自定義你的環境。 基本上你可以通過 docker run的-e選項在容器中設置環境變數,啟動腳本會拿到環境變數,因此,如果你的DB名為some_project_dev, 你就可以這么運行容器:

$ docker run -i -t -P -v $PWD:/srv -e DB_NAME=some_project_dev symfony

INIT 環境變數就更強大了,它允許你啟動時運行指定的腳本。比如, 你有一個bin/setup腳本運行composer install命令並且設置資料庫schema:

#!/bin/bash

composer install

app/console doctrine:schema:update --force

用-e來運行它:

$ docker run -i -t -P \

-v $PWD:/srv \

-e DB_NAME=some_project_dev \

-e INIT=bin/setup

注意,-e選項可以在docer run中多次使用,看起來相當酷。另外,你的啟動腳本需要可執行許可權(chmod +x)。

現在我們通過curl發送請求到容器,來檢查一下是否所有的東西都像預期一樣工作。首先,我們需要取到Docker映射到容器的80埠的公共埠,用docker port命令:

$ docker port $(docker ps -aql 1) 80

0.0.0.0:49153

docker ps -aql 1 是個好用的命令,可以方便的檢索到最後一個容器的id, 在我們的例子中,Docker 把容器的80埠映射到了49153埠。我們 curl 一下看看。

$ curl http://localhost:49153

You are not allowed to access this file. Check app_dev.php for more information.

當我們不從localhost(譯者註:容器的localhost)訪問dev controller時,得到了Symfony的默認錯誤消息,這再正常不過了, 因為我們不是從容器內部發送 curl 請求的, 所以,可以安全的從前端控制器web/app_dev.php中移除這些行。

// This check prevents access to debug front controllers that are deployed by accident to proction servers.

// Feel free to remove this, extend it, or make something more sophisticated.

if (isset($_SERVER['HTTP_CLIENT_IP'])

|| isset($_SERVER['HTTP_X_FORWARDED_FOR'])

|| !(in_array(@$_SERVER['REMOTE_ADDR'], array('127.0.0.1', 'fe80::1', '::1')) || php_sapi_name() === 'cli-server')

) {

header('HTTP/1.0 403 Forbidden');

exit('You are not allowed to access this file. Check '.basename(__FILE__).' for more information.');

}

這些行阻止了任何從localhost以外的地方訪問dev controller。
現在再curl的時候就可以正常工作了,或者用瀏覽器訪問 http://localhost:49153/:

很容易吧! 現在我們可以快速的啟動、更新環境了,但還是有很多地方需要改進。

C. docker快速搭建前端開發環境(2容器內運行與開發)

        回顧上期,明哥打包好了一個前端鏡像

        第一期內容回顧: https://www.jianshu.com/p/d7718adee07e

     1.找到上回我們打包好的鏡像,啟動!

        docker    run    -it   -p3000:80    my_vue:2.0     /bin/bash

        -p:埠映射:主機(宿主)埠:容器埠

        我們訪問伺服器的3000埠實際上是訪問容器的80埠

        還有印象的小夥伴應該記得test2是我們上次clone的vue項目

        執行npm run build 得到dist文件夾

        找到nginx配置文件中的server(虛擬主機)    ps:居然還include文件。有點難找。。

        將nginx虛擬主機網頁根目錄指向list

            listen:虛擬主機的服務埠(默認80)

            root:用於指定虛擬主機的網頁根目錄(改為指向dist)

            try_files: 按順序檢查文件是否存在,返回第一個找到的文件

    4. 重啟容器中的nginx(nginx -t排錯)

        成功訪問到明哥的vue項目!

        docker  run  -it  -p宿主機埠:容器埠   -v宿主機文件夾:容器文件夾    my_vue:2.0  /bin/bash

        我們-v綁定後,在本機中修改文件,容器中文件也會對應修改。

        完結撒花!

D. docker部署前端和後端打包程序

docker啟動命令:

nginx.conf修改為:

程序更新:每次只需要把前端vue打包程序更新到/data2/geovis/docker_nginx/nginx_share_dir下即可。

Dockerfile文件內容:

start.sh內容(最後一個jar包不能後台運行,否則容器會自動退出):

構建docker鏡像

啟動geovis-jar容器:

程序更新:每次只需要docker restart geovis-jar重啟容器即可。

E. 前端應用容器化部署 Docker

一、基礎方法

針對node做後台得服務部署

二、高級用法

​ 相比於基礎用法,簡化過程,統一配置。

​ 使用 Dockerfile 文件對將項目構建成鏡像

註:

使用命令 pm2 start app.js 之後, pm2 默認在後台運行, 如果使用了 Docker 後,容器運行並立即退出,需要手動給「pm2」指定參數 --no-daemon

F. 生產環境Docker中部署前端項目

1、filezilla軟體將本地打包文件(dist)上傳至伺服器規定文件夾中(不同公司要求的文件夾不盡相同) 

2、SecureCRT 8.1軟體  進入伺服器Dockers環境中 執行以下操作進行項目部署

2.1 cd dockers  進入dockers 環境

2.2 docker ps (查看所有正在運行的項目)  --- 其中本次要部署的前端項目名稱以  xx/xxx-xxx 代替

2.3 docker container stop  xx/xxx-xxx                 ----停止運行項目

2.4 docker contaner rm(remove)  xx/xxx-xxx      ----移除 項目

2.5 docker image  (查看所有正在運行的項目鏡像)

2.6 docker image rm(remove) xx/xxx-xxx           ----移除 項目鏡像

2.7 docker-compose up -d                                  ----一鍵啟動 已上傳至伺服器中的打包文件