Docker 部署前端应用

什么是 Docker ?

Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器或Windows 机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。

为什么使用 Docker ?

背景

现在前后端分离部署成为了一种趋势,而前端较为常见的部署就是通过 Nginx,不管是直接部署静态文件还是代理 Node 服务,都离不开 Nginx 的支持。

面临的问题

这里以 Node 服务为例,实际应用中,我们会在一台服务器上部署 N 多个应用,而这个时候就必须要求我们严格管理好每个应用的端口不能冲突,其二,我们需要保证每台服务器上安装了 Node 并且 Node 的版本和本地一致,以防出现一些版本引起的错误,其三,当我们交付给外部用户时,需要保证用户服务器上安装了我们启动应用必备的环境,其四,较为极端的情况下,两个应用之间的 Node 版本不兼容。
Nginx 部署静态文件也是同理,我们需要保证每台服务器上的 Nginx 配置相同,当配置文件需要修改时,我们需要同步修改每台服务器上的 Nginx 配置,对运维很不友好,也增加了出错的可能性。

使用 Docker 后的好处

  1. 标准化应用发布,docker 容器包含了运行环境和可执行程序,可以跨平台和主机使用
  2. 环境隔离,每个应用有自己的独立运行环境,不再依赖服务器的环境配置
  3. 交付物标准化
  4. 一次构建,多次交付

安装

MacOS Docker 安装
Ubuntu Docker 安装
Debian Docker 安装
CentOS Docker 安装
Windows Docker 安装

部署

准备应用

这里我们直接用脚手架新建一个 vue 应用。

编写 Dockerfile

在应用根目录下,新建 Dockerfile 文件,填入以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#指定 node 镜像对项目进行依赖安装和打包
FROM node:12.16.1-alpine AS builder

# 将容器的工作目录设置为 /app (当前目录,如果 /app 不存在,WORKDIR 会创建 /app 文件夹)
WORKDIR /app
COPY package.json /app/
RUN npm i --registry=https://registry.npm.taobao.org
COPY . /app
RUN npm run build

#指定 nginx 配置项目,--from=builder 指的是从上一次 build 的结果中提取了编译结果(FROM node:alpine as builder),即是把刚刚打包生成的 dist 放进 nginx 中
FROM nginx
COPY --from=builder app/dist /usr/share/nginx/html/
COPY --from=builder app/nginx.conf /etc/nginx/conf.d/

#暴露容器 80 端口
EXPOSE 80

编写 Nginx 配置

在应用根目录下,新建 nginx.conf 文件,填入以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
server {
listen 80;
# 本地测试需要修改为本机的 IP
server_name XXXXX;

#charset koi8-r;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;


location ^~ /api {
proxy_pass http://demo-server;
}

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;
}
}

upstream demo-server {
server XXXXXXXX;
}

构建镜像

1
2
# 构建镜像
docker build -t nginx-vue .
  • -t: 指定要创建的目标镜像
  • .: Dockerfile 文件所在目录,可以指定 Dockerfile 的绝对路径

镜像

查看镜像

1
2
# 查看镜像
docker image ls | grep nginx-vue

出现结果则应用镜像构建成功,下面我们基于构建的镜像启动容器

容器

启动容器

1
2
# 启动容器
docker run -d --name nginx-vue -p 3000:80 nginx-vue
  • -p: 指定端口映射,格式为:主机(宿主)端口:容器端口 将宿主的 3000 端口映射到容器的 80 端口
  • –name: 为容器指定一个名称

打开地址后可以看到我们的页面

页面

常用指令

1
2
3
4
5
6
7
docker rm -f  [DOCKER...] // 删除 docker

docker ps -a // 查看所有容器

docker images // 查看所有镜像

docker rmi [IMAGE...] // 删除镜像

总结

以上是自己对 Docker 的一些粗浅认识,欢迎大佬们一起交流学习~

查看评论