构建Vue Demo

1. 新建一个Vue项目

vue create docker-demo

# 启动项目
yarn serve

# 构建打包
yarn build

默认情况下Dist就是我们需要的静态资源了。

前端项目分类

1. Nginx静态部署
2. Node服务部署

2. 新建Dockerfile文件

3. 准备镜像

   Nginx

   docker pull nginx
   

   在项目根目录创建Nginx配置文件

   // 创建
   touch default.conf
   
   // 内容
   server {
       listen 80;
    server_name localhost;
   
       access_log  /var/log/nginx/host.access.log  main;
       error_log  /var/log/nginx/error.log  error;
   
       location / {
           root   /usr/share/nginx/html;
           index  index.html index.htm;
           try_files $uri $uri/ /index.html;
       }   
   }
   

4. 编写Dockerfile文件

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf

第一行： 指定镜像基于nginx:latest镜像构建

第二行：将项目根目录复制到镜像中

第三行：将项目根目录配置文件复制到镜像中

5. 构建镜像

Docker 通过 build 命令来构建镜像

可以看到打出133MB的镜像vue-demo

启动这个镜像

打开浏览器可以访问

通过客户端可以看到容器列表