当前位置:首页 » 网页前端 » 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                                  ----一键启动 已上传至服务器中的打包文件