1、创建一个vue项目，其他文章上有介绍如何创建vue项目，自行查看
vue create docker-vue-demo
2、创建完成后build vue项目
npm run build
build 成功后项目根目录会生成一个dist 目录，然后把这个目录打包上传到服务器中
3 、拉取 Nginx 镜像
docker pull nginx:latest
会出现如下日志
Using default tag: latest
latest: Pulling from library/nginx
33268f69048f: Pull complete
cda70de1684e: Pull complete
2ece0010a9f9: Pull complete
3acc98c10333: Pull complete
cda70de1684e: Pull complete
Digest: sha256:4ecad4bb0d8a456b8ef88ffc86a4cc1554b6be59c2920df8476053b59e2d811e size: 2816
Status: Downloaded newer image for nginx:latest
docker.io/library/nginx:latest
如果你出现这样的异常，请确认 Docker 实例是否正常运行。
Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?
完成后，在项目根目录创建 Nginx 配置文件
touch nginx.conf
编写nginx配置
events {
worker_connections 1024;
}
http {
client_max_body_size 10M;
include mime.types;
default_type application/octet-stream;
sendfile on;
client_header_timeout 600;
client_body_timeout 600;
keepalive_timeout 600;
underscores_in_headers on;
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
server {
listen 80;
server_name localhost;
charset utf-8;
proxy_read_timeout 600;
proxy_send_timeout 600;
location / {
root /docker-vue-demo;
index index.html index.htm;
}
}
}
4、制作镜像
在项目的根目录下创建一个Dockerfile文件，用于构建镜像
打开 Dockerfile ，写入如下内容：
FROM nginx
WORKDIR /web
COPY dist/ /docker-vue-demo/
COPY nginx.conf /etc/nginx/nginx.conf
备注
FROM nginx 指定该镜像是基于 nginx:latest 镜像而构建的
WORKDIR 指定容器的一个目录
COPY dist/ /docker-vue-demo 将项目根目录下 dist 文件夹中的所有文件复制到镜像中 docker-vue-demo/ 目录下；
COPY nginx.conf /etc/nginx/nginx.conf 将 nginx.conf 复制到 etc/nginx/nginx.conf 用本地的 nginx.conf 配置来替换 nginx 镜像里的配置。
5、构建镜像Docker 通过 build 命令来构建镜像 . 表示在当前目录
docker build -t docker-vue-demo .
备注
-t 参数给镜像命名 docker-vue-demo
. 是基于当前目录的 Dockerfile 来构建镜像
执行成功后，将会输出：
Sending build context to Docker daemon 52.07MB
Step 1/3 : FROM nginx
---> 8cf1bfb43ff5
Step 2/3 : COPY dist/ /docker-vue-demo/
---> Using cache
---> 9a3d9f94c84b
Step 3/3 : COPY nginx.conf /etc/nginx/nginx.conf
---> 7df6efaf9592
Removing intermediate container e946dae3a800
---> f889c601aca5
Successfully built f889c601aca5
Successfully tagged docker-vue-demo:latest
通过docker images 查看镜像是否制作成功
6、运行镜像
docker run -d -p 49999:80 --name vue-demo docker-vue-demo
备注：
-d 设置容器在后台运行
-p 表示端口映射，把本机的 49999 端口映射到 container 的 80 端口，49999是对外访问的端口，http://服务器IP:49999进行访问
--name 设置容器名 vue-demo
docker-vue-demo 是我们上面构建的镜像名字
通过docker ps 命令查看容器
END
