1、创建一个vue项目，其他文章上有介绍如何创建vue项目，自行查看

vue create docker-vue-demo  

2、创建完成后build vue项目

npm run build

build 成功后项目根目录会生成一个dist 目录，然后把这个目录打包上传到服务器中

image.png

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