构建Vue Demo

1. 新建一个Vue项目

vue create docker-demo

# 启动项目
yarn serve

# 构建打包
yarn build

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

前端项目分类

1. Nginx静态部署
2. Node服务部署
3. 新建Dockerfile文件
4. 准备镜像
   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;
       }   
   }
   

5. 编写Dockerfile文件

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

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

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

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

5. 构建镜像

Docker 通过 build 命令来构建镜像

docker build -t vue-demo .

-t 给镜像命名
. 基于当前目录Dockerfile来构建

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

启动这个镜像

➜  docker-demo git:(master) ✗ docker run -d -p 3000:80 3201fe1aafe9
58c6f69a71dc6cc12bd84f4c72aad2473af20a3c966b4f374e1de9acd4339805

打开浏览器可以访问

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