Javascript is required
Docker/构建Vue项目

构建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镜像构建

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

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

  1. 构建镜像

Docker 通过 build 命令来构建镜像

docker build -t vue-demo .

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

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

启动这个镜像

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

打开浏览器可以访问

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


🇨🇳2018-2024 晋ICP备18004820号-4