docker linux 下部署vue項目配置nginx_linux服务器docker 部署vue 项目-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45674159/article/details/131854342

本文介绍了如何使用Docker拉取并启动Nginx容器，创建挂载目录，复制配置文件，并详细展示了Nginx的配置以支持Vue应用的部署，包括设置代理以连接后端API服务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 、docker 拉取 nginx 镜像

docker pull nginx:1.22.0

在这里插入图片描述

2、启动容器

docker run --name my-nginx -p 80:80 -d nginx:1.22.0

3、创建存放数据的文件挂载目录

mkdir -p /dockerdata/nginx/html /dockerdata/nginx/conf /dockerdata/nginx/logs

4、将 nginx 容器内数据复制到存放数据的文件目录

docker cp my-nginx:/etc/nginx/nginx.conf /dockerdata/nginx

docker cp my-nginx:/etc/nginx/conf.d/default.conf /dockerdata/nginx/conf

然后停止 nginx 容器

docker stop my-nginx

删除 nginx 容器

docker rm my-nginx

5,重新开启 nginx 容器，挂载目录

docker run --privileged=true -e TZ="Asia/Shanghai" -it -d --name my-nginx -p 80:80 -v /dockerdata/nginx/html:/usr/share/nginx/html -v /dockerdata/nginx/nginx.conf:/etc/nginx/nginx.conf -v /dockerdata/nginx/conf/default.conf:/etc/nginx/conf.d/default.conf -v /dockerdata/nginx/logs:/var/log/nginx nginx:1.22.0

自此nginx启动挂载目录成功

vue 部署nginx docker

vue项目在本地打包打包成功后将dist 里面所有的文件复制到 nginx 挂载目录下
在这里插入图片描述
修改配置文件

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        #root /dockerdata/nginx/html/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

   location /dev-api/{
         proxy_pass   http://ip:7500/;
         proxy_redirect off;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header   Cookie $http_cookie;
          # for Ajax
          #fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
          proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header x-requested-with $http_x_requested_with;
          client_max_body_size 10m;
          client_body_buffer_size 128k;
          proxy_connect_timeout 90;
          proxy_send_timeout 90;
          proxy_read_timeout 90;
          proxy_buffer_size 128k;
          proxy_buffers 32 32k;
          proxy_busy_buffers_size 128k;
          proxy_temp_file_write_size 128k;
    }
    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}