docker构建前端静态网页镜像

前言

1. 这里用的是vue的框架，没有修改打包配置，故打包后的文件路径为代码目录下的dist文件夹
2. 需安装好docker，若未安装，且系统为debian，可参考debian安装docker

步骤

1. 搭建前端基本项目，详见Vue CLI 3搭建项目详解
2. 编写Dockerfile文件

#可访问 https://hub.docker.com/_/nginx 查看python镜像源
FROM nginx:1.15.2-alpine
#将当前目录下dist文件夹所有文件都拷贝到image文件中指定目录
COPY ./dist /usr/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 开放容器的80端口，允许外部访问这个端口
EXPOSE 80

3. 编写nginx配置

server {
    listen 80;
    root /usr/nginx/html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

4. (按需)将代码上传至git，并拉取至宿主机 sudo git clone 【代码库地址】

我是在windows下开发的，部署是在debian下部署，故用git管理代码

5. 进入项目目录 cd vue-test
6. 安装依赖 npm i
7. 打包前端代码 npm run build
8. 执行构建image命令 docker image build -t vue-test .
9. 根据镜像生成容器 docker run -p 1234:80 -it -d vue-test
10. 宿主机访问 localhost:1234