docker部署前端代码

原创已于 2023-04-18 10:39:54 修改 · 573 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#服务器 #运维

于 2023-04-18 10:37:36 首次发布

该文详细介绍了如何使用Docker部署前端打包后的dist文件夹，包括创建Dockerfile，复制配置文件，解压dist，构建镜像以及运行容器的步骤。同时提到了可能遇到的前端资源路径问题和解决方法，以及一些常用的Docker管理命令。

前言

用最简单的步骤记录一下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     #删除镜像