前言
- 这里用的是vue的框架,没有修改打包配置,故打包后的文件路径为代码目录下的dist文件夹
- 需安装好docker,若未安装,且系统为debian,可参考debian安装docker
步骤
- 搭建前端基本项目,详见Vue CLI 3搭建项目详解
- 编写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
- 编写nginx配置
server {
listen 80;
root /usr/nginx/html;
location / {
try_files $uri $uri/ /index.html;
}
}
- (按需)将代码上传至git,并拉取至宿主机 sudo git clone 【代码库地址】
我是在windows下开发的,部署是在debian下部署,故用git管理代码
- 进入项目目录
cd vue-test
- 安装依赖
npm i
- 打包前端代码
npm run build
- 执行构建image命令
docker image build -t vue-test .
- 根据镜像生成容器
docker run -p 1234:80 -it -d vue-test
- 宿主机访问
localhost:1234