Docker 发布前端包

创建项目配置

1. 新建项目或使用已有项目

项目的代码如果创建和架构如果不清楚，请自行百度

1	 mkdir my_project

2. 创建 "docker" 文件夹

1	cd my_project && mkdir docker

3. 进入 "docke" 文件夹

1	cd docker

4. 创建 "Dockerfile" 构建镜像的文本文件

a. 创建文件

1	vim Dockerfile  or vi Dockerfile

b. 文件内容

1	FROM nginx:1.17-alpine
2
3	ADD ./html /usr/share/nginx/html
4	ADD nginx.conf /etc/nginx/nginx.conf
5
6	EXPOSE 80
7
8	CMD ["nginx", "-g", "daemon off;"]

5. 创建项目 "nginx" 配置文件

a. 创建文件

1	vim nginx.conf  or vi nginx.conf

b. 文件内容

nginx 配置就不做代码注释了,如果不清楚请自行百度

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;
	keepalive_timeout  65;
    client_max_body_size 20m;
    
	upstream proxy-service {
		server ipcdc.pdcts.com.cn;
	}

	server {
		listen       80;
		server_name  localhost;

		location / {
			root   /usr/share/nginx/html;
			try_files $uri $uri/ /index.html;
			add_header Cache-Control "no-cache";
		}
		location /login/ {
			root   /usr/share/nginx/html;
			try_files $uri $uri/ /login/index.html;
			add_header Cache-Control "no-cache";
		}
		location /catalogue/ {
			root   /usr/share/nginx/html;
			try_files $uri $uri/ /catalogue/index.html;
			add_header Cache-Control "no-cache";
		}
		location /api/ {
			proxy_pass http://proxy-service;
		}
				error_page   500 502 503 504  /50x.html;
		location = /50x.html {
			root   /usr/share/nginx/html;
		}
	}
}

6. 回到项目跟目录创建 "scripts" 文件夹

1		mkdir scripts

7. 进入 "scripts" 目录

1		cd scripts

8. 创建 build-deploy.sh 文件

本文件是用于打包前端项目与把 docker 一些文件输入景象中
TODO: dist 目录是项目打包后的目录,如果打包目录不是dist可以吧本文件中的所有dist 修改为对应的目录
TODO: 如果打包目录是build 需要吧本文件中的build 修改一下名称,因为本文件会吧打包后的文件移动到build目录中,还有一下其他的操作
TODO: 上面的两条TODO说明的大概意思是,代码打包目录不是dist 修改本文件中的dist 为打包目录名称，如果打包目录是build，就需要修改本文件的build 为其他名字

a. 创建文件

1	vim build-deploy.sh  or vi build-deploy.sh

b. 文件内容

 1#!/bin/bash
 2# Create a zip package which contains all the files to build the docker image
 3# 获取包版本 ---package.json文件中的 version
 4pkgVersion=$(grep -oE '"version":\s*"[^"]+' -m 1 ./package.json | grep -oE '[^"]+$')
 5# 获取包名称 ---package.json文件中的 name 
 6pkgName=$(grep -oE '"name":\s*"[^"]+' -m 1 ./package.json | grep -oE '[^"]+$')
 7deployDir=$pkgName
 8echo Building deployment $pkgName@$pkgVersion.
 9
10rm -rf ./build
11
12npm run build
13#打包完成后创建 ./build/html/ 目录
14mkdir -p ./build/html/
15# 把dist目录中的内容 移动到 ./build/html/ 目录
16mv ./dist/* ./build/html/
17# 把docker目录中的内容 移动到 ./build/目录
18cp -r docker/* ./build/
19# 把./package.json 移动到 ./build/目录
20cp ./package.json ./build/
21#创建 ./build/scripts 目录
22mkdir -p ./build/scripts/
23# 把 ./scripts/build-docker.sh 移动到 ./build/scripts 目录
24cp ./scripts/build-docker.sh ./build/scripts
25# 把 ./scripts/build-docker.sh 移动到 ./build/scripts 目录
26cp ./scripts/run-docker.sh ./build/scripts
27
28echo deployDir: $deployDir
29rm -rf $deployDir
30mv ./build/ $deployDir
31zip -r $deployDir.zip ./$deployDir
32mv $deployDir ./build
33
34## 删除dist目录
35rm -rf ./build
36rm -rf ./dist
37
38echo "The deployment package is at ${deployDir}.zip, it's ready to be uploaded to the server."
39
40# git commit -m 'ci: version '$pkgVersion
41# git tag -f $pkgVersion
42# echo "Git tag $pkgVersion is created. please push it to your remote repo."

9. 创建 build-docker.sh 文件

这个文件主要是用于上传服务器或在本级运行 docker 时把前端项目给注入到 docker中的

a. 创建文件

1	vim build-docker.sh  or vi build-docker.sh

b. 文件内容

 1#!/bin/bash
 2
 3pkgVersion=$(grep -oE '"version":\s*"[^"]+' -m 1 ./package.json | grep -oE '[^"]+$')
 4
 5pkgName=$(grep -oE '"name":\s*"[^"]+' -m 1 ./package.json | grep -oE '[^"]+$')
 6
 7echo "Attention: This script should only be executed in generated deploy folder."
 8
 9docker build -t $pkgName:$pkgVersion ./
10

10. 创建 run-docker.sh 文件

本文件用于启动本项目的 docker 服务

a. 创建文件

1	vim run-docker.sh  or vi run-docker.sh

b. 文件内容

 1#!/bin/bash
 2# 获取项目版本信息
 3pkgVersion=$(grep -oE '"version":\s*"[^"]+' -m 1 ./package.json | grep -oE '[^"]+$')
 4# 获取项目包名
 5pkgName=$(grep -oE '"name":\s*"[^"]+' -m 1 ./package.json | grep -oE '[^"]+$')
 6
 7if [ -z $pkgName ]; then
 8echo Package name not found.
 9exit 1
10fi
11
12# 停止当前的Docker容器
13runningContainerId=$(docker container inspect $pkgName -f '{{.Id}}')
14if [ ! -z "$runningContainerId" ]; then
15    echo Found existing container $runningContainerId
16    echo Stopping
17    docker container stop $runningContainerId
18    echo Removing
19    docker container rm $runningContainerId
20fi
21
22# 创建bridge网络, mgmt-net可以修改,为什么要使用NetWork?由于在Dockerfile的文件配置需要设置网络参数
23docker network create mgmt-net
24
25# 启动Docker容器 ,注意如果上边的创建bridge网络名有修改，启动命令的名称也需要同步修改
26echo Starting cotnainer with image $pkgName:$pkgVersion
27docker run -p 7123:80 --restart on-failure -d --network weapps-net --name $pkgName $pkgName:$pkgVersion
28
29# 本地部署
30#docker run -p 7123:80 -v /data/weapps-deploy/web-config/nginx.conf:/etc/nginx/nginx.conf --restart on-failure -d --network mgmt-net --name $pkgName $pkgName:$pkgVersion

项目打包

1. 拉取项目依赖

具体使用什么工具需要看项目需要

1	gnpm install 
2	or
3	gnpm i

2. 打包前端项目

项目打包后为压缩文件,文件名是package.json的name名称

1	sh scripts/build-deploy.sh

3. 上传前端项目到服务器

name: 是package.json的name名称
serverIP: 服务器链接IP
path: 上传服务器的目录
如果本地可以不执行此项

1	ssh ./${name}.zip root@${serverIP}:/${path}

4. 解压打包后的项目

name: 是package.json的name名称

1	unzip ./${name}.zip

5. 进入项目文件夹

name: 是package.json的name名称

1	cd ./${name}

6. 向docker注入项目镜象

1	sh scripts/build-docker.sh

7. 查看docker中有没有项目镜象

1	docker images

8. 启动前端项目

1	sh scripts/run-docker.sh

9. 查看前端项目状态

多执行几次，有时候启动速度没那么快

1	docker ps

补充

1. docker 启动没有成功，查看日志

projectID：docker ps 中查找项目ID

1	docker logs ${projectID}

2. docker查看网络内部信息

1	docker network inspect default_network

3. 列所有列表的网络

1	docker network  ls

4. 移除指定的网络

1	docker network rm default_network

5. docker进入容器内部执行命令

projectID：docker ps 中查找项目ID
退出docker容器内部："exit"

1	docker exec -it ${projectID} sh

7. 停止docker项目

projectID：docker ps 中查找项目ID

1	docker stop ${projectID}

8. 默认显示正在运行中的container

-a : 包括未运行的
-l : 运行中的

1	docker ps
2	or 
3	docker ps -a

9. 删除一个或多个container

projectID：docker ps 中查找项目ID

1	docker rm ${projectID}

10. 删除所有的container

1	docker rm `docker ps -a -q`
2	or
3	docker ps -a -q | xargs docker rm

11. 删除docker镜像

mirrorID : docker images中查找

1	docker rmi ${mirrorID}

12. 开启/停止/重启container

projectID：docker ps 中查找项目ID

1	docker start/stop/restart ${projectID}

13. 清空不被使用的虚悬镜像

1	docker image prune -f

Docker 发布前端包

创建项目配置

1. 新建项目或使用已有项目

2. 创建 "docker" 文件夹

3. 进入 "docke" 文件夹

4. 创建 "Dockerfile" 构建镜像的文本文件

a. 创建文件

b. 文件内容

5. 创建 项目 "nginx" 配置文件

a. 创建文件

b. 文件内容

6. 回到项目跟目录创建 "scripts" 文件夹

7. 进入 "scripts" 目录

8. 创建 build-deploy.sh 文件

a. 创建文件

b. 文件内容

9. 创建 build-docker.sh 文件

a. 创建文件

b. 文件内容

10. 创建 run-docker.sh 文件

a. 创建文件

b. 文件内容

项目打包

1. 拉取项目依赖

2. 打包前端项目

3. 上传前端项目到服务器

4. 解压打包后的项目

5. 进入项目文件夹

6. 向docker注入项目镜象

7. 查看docker中有没有项目镜象

8. 启动前端项目

9. 查看前端项目状态

补充

1. docker 启动没有成功，查看日志

2. docker查看网络内部信息

3. 列所有列表的网络

4. 移除指定的网络

5. docker进入容器内部执行命令

7. 停止docker项目

8. 默认显示正在运行中的container

9. 删除一个或多个container

10. 删除所有的container

11. 删除docker镜像

12. 开启/停止/重启container

13. 清空不被使用的虚悬镜像

5. 创建项目 "nginx" 配置文件