Docker -- 构建nginx镜像，启动vue项目

小白的码BUG之路2026-10-02 9:37

基础

打包的的vue文件，dist目录复制到html目录下

构建文件

复制代码

dockerfile 构建文件

复制代码

# 基础镜像
FROM nginx
# author
MAINTAINER ruoyi

# 挂载目录
VOLUME /home/kane/docker/ruoyi-ui
# 创建目录
RUN mkdir -p /home/kane/docker/ruoyi-ui
# 指定路径
WORKDIR /home/kane/docker/ruoyi-ui
# 复制conf文件到路径
COPY ./conf/nginx.conf /etc/nginx/nginx.conf
# 复制html文件到路径
COPY ./html/dist /home/kane/docker/ruoyi-ui

nginx配置文件nginx.conf

XML 复制代码

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  huahuaqiqi.com;

        location / {
            root   /home/kane/docker/ruoyi-ui;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        location /prod-api/{
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://ruoyi-gateway:8080/;
        }

        # 避免actuator暴露
        if ($uri ~ "/actuator") {
            return 403;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

构建镜像

进入到ruoyi-ui目录

执行构建命令

XML 复制代码

docker build -t ruoyi-nginx .

查看镜像

XML 复制代码

docker images

启动容器

XML 复制代码

docker run -d --name ruoyi-nginx -p 80:80 ruoyi-nginx

查看容器是否开启

XML 复制代码

docker ps

查看效果

根据自己宿主机的ip访问

http://192.168.129.131

完美，成功