ng-alain 工程已经下载到本地,且使用npm run build 打包了,生成一个 dist 目录,这个目录就是我们打包后的前端工程
上传所需文件及目录
将打包镜像所需要的文件及目录都上传,包括:
- _ngnix
- dist
- Dockerfile
- docker-compose.yml - 如果使用k8s 启动镜像的话要用到这个yml 文件
生成镜像
1. 修改Dockerfile 文件
先看看原始的Dockerfile 文件的内容:
# STEP 1: Build
FROM node:8-alpine as builder
LABEL authors="cipchk <cipchk@qq.com>"
COPY package.json package-lock.json ./
RUN npm set progress=false && npm config set depth 0 && npm cache clean --force
RUN npm i && mkdir /ng-alain && cp -R ./node_modules ./ng-alain
WORKDIR /ng-alain
COPY . .
RUN npm run build
# STEP 2: Setup
FROM nginx:1.13.5-alpine
COPY --from=builder /ng-alain/_nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /ng-alain/_nginx/ssl/* /etc/nginx/ssl/
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /ng-alain/dist /usr/share/nginx/html
CMD [ "nginx", "-g", "daemon off;"]
ng-alain 作者考虑很周全,把在服务器上打包前端工程的过程也写出来了,不过打包的过程在自己电脑上可以完成,就不用将整个ng-alain 目录复制到服务器了,所以只需将上一节列出的内容复制到服务器就行,然后修改Dockerfile 内容,如下:
FROM nginx:1.13.5-alpine
COPY ./_nginx/default.conf /etc/nginx/conf.d/default.conf
COPY ./_nginx/ssl/* /etc/nginx/ssl/
RUN rm -rf /usr/share/nginx/html/*
COPY ./dist /usr/share/nginx/html
CMD [ "nginx", "-g", "daemon off;"]
实际上就是把step 1 的过程删除了
2. 打包镜像
此时的目录结构是:
[root@nancy ng-alain]# ll
total 16
drwxr-xr-x 3 root root 4096 Dec 10 09:28 dist
-rw-r--r-- 1 root root 150 Nov 22 08:48 docker-compose.yml
-rw-r--r-- 1 root root 607 Dec 10 09:37 Dockerfile
drwxr-xr-x 3 root root 4096 Dec 10 09:30 _nginx
[root@nancy ng-alain]# pwd
/home/hadmin/ng-alain
[root@nancy ng-alain]#
执行命令:
[root@nancy ng-alain]# docker build -t ng-alain .
查看镜像:
[root@nancy ng-alain]# docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
ng-alain latest 4f973803079c 41 minutes ago 25.8 MB
docker.io/nginx 1.13.5-alpine ea7bef82810a 6 weeks ago 15.51 MB
hub.c.163.com/library/busybox latest d20ae45477cb 3 months ago 1.129 MB
[root@nancy ng-alain]#
这样镜像就生成了
3. 启动镜像
需要让镜像在后台启动,执行命令:
docker run -d -p 80:80 ng-alain
或者
docker run -d -p 80:80 ng-alain nginx -g 'daemon off;'
这样就可以访问了:DEMO