前言
用最简单的步骤记录一下docker部署前端打包好的dist文件夹
步骤
- 确保Linux上docker已经安装,可以使用docker version查看。
- 将Dockerfile、nginx.conf、dist.zip三个文件上传到Linux服务器上,例如上传到/home/web下,注意Dockerfile文件中COPY和ADD命令用的相对路径。
- Dockerfile文件内容如下:
FROM nginx:1.23.1
COPY nginx.conf /etc/nginx/nginx.conf #这里是将自己写好的Nginx配置文件替换容器中的Nginx配置文件
ADD dist /usr/share/nginx/html/ #这里是将前端解压后的dist文件夹上传到容器Nginx的html文件夹下
- nginx.conf截取主要配置如下
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
#root html;
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri /index.html;
# fix 304
expires -1;
if_modified_since off;
add_header Last-Modified "";
add_header Cache-Control no-cache;
etag off;
}
}
- 将前端dist.zip使用命令unzip dist.zip解压,如果提交没有unzip命令,就使用yum install unzip安装,或是下载离线安装包进行安装。
- 在/home/web目录下执行
docker build -t imageName:v1 .
,其中imageName是自己起的镜像名,v1是版本号,这步是生成镜像。 - 在/home/web目录下执行
docker run -d -p 38090:80 --name containerName imageName:v1
,其中containerName 是自己起的容器名,imageName是上一步起的镜像名,38090是自己定义的端口号,注意不要用已经占用的端口。 - 然后浏览器测试前端是否正常启动http://服务器IP:38090/路由地址
- 如果不好使,可以看下容器日志,在/var/lib/docker/containers/文件夹下是以容器id命名的文件夹,找到对应的容器日志查看问题。
后记
- 前端开发的时候,资源的路径可能存放不同,部署后可能访问不到,页面打不开,这就要具体和前端沟通,调整前端路径,或是通过修改nginx.conf配置文件,以及调整前端代码放置在Nginx的html文件夹下的目录。
- 这里记录几个还可能用到的命令
docker ps #查看容器命令
docker rm 容器id #删除容器
docker stop 容器id #停容器
docker images #查看镜像
docker rmi 镜像id #删除镜像