docker部署前端代码

前言

用最简单的步骤记录一下docker部署前端打包好的dist文件夹

步骤

1. 确保Linux上docker已经安装，可以使用docker version查看。
2. 将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;
        }
}

3. 将前端dist.zip使用命令unzip dist.zip解压，如果提交没有unzip命令，就使用yum install unzip安装，或是下载离线安装包进行安装。
4. 在/home/web目录下执行 docker build -t imageName:v1 . ，其中imageName是自己起的镜像名，v1是版本号，这步是生成镜像。
5. 在/home/web目录下执行 docker run -d -p 38090:80 --name containerName imageName:v1 ，其中containerName 是自己起的容器名，imageName是上一步起的镜像名，38090是自己定义的端口号，注意不要用已经占用的端口。
6. 然后浏览器测试前端是否正常启动http://服务器IP:38090/路由地址
7. 如果不好使，可以看下容器日志，在/var/lib/docker/containers/文件夹下是以容器id命名的文件夹，找到对应的容器日志查看问题。

后记

• 前端开发的时候，资源的路径可能存放不同，部署后可能访问不到，页面打不开，这就要具体和前端沟通，调整前端路径，或是通过修改nginx.conf配置文件，以及调整前端代码放置在Nginx的html文件夹下的目录。
• 这里记录几个还可能用到的命令

docker ps            #查看容器命令
docker rm 容器id     #删除容器
docker stop 容器id   #停容器
docker images        #查看镜像
docker rmi 镜像id     #删除镜像