docker上跑vue项目

cdada_26

于 2021-09-08 17:51:14 发布

阅读量197

点赞数

分类专栏： VUE Linux 文章标签： docker nginx vue.js

本文链接：https://blog.youkuaiyun.com/cdada_26/article/details/120184760

版权

VUE 同时被 2 个专栏收录

10 篇文章

订阅专栏

Linux

5 篇文章

订阅专栏

本文介绍了如何通过Docker启动一个Nginx容器，并配置其作为Vue项目的服务器。首先，通过`docker run`命令创建并运行Nginx容器，设置端口映射。接着，使用`docker cp`命令复制容器内的nginx.conf文件进行编辑，添加针对Vue项目和API请求的配置。然后，将编辑后的配置文件和Vue项目的dist目录内容复制回容器。最后，重启容器使配置生效。整个过程详细阐述了Docker容器的管理和Nginx的配置方法。

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

一、docker 起一个nginx 容器

  docker run -d --name 起一个容器名 -p 8899:8899 --privileged nginx

注：端口映射前面是外部的端口,后面是容器内项目的端口

因为容器中无法直接进行修改，将nginx.conf的配置文件复制出来
注：sad_gates为容器名
```
 docker cp sad_gates:/etc/nginx/nginx.conf /opt/nginx.config
```

修改刚才复制的nginx.conf,在http内添加以下内容


    server {
       listen 8899;     #1.vue项目跑在哪个端口
       server_name 192.168.1.123;     #2.当前服务器ip
       location / {
       root   /opt/dist;     #3.dist文件的位置(我是直接放在home目录下了) 
       try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写)
       }
        location /api {  #4.当请求跨域时配置端口转发
            proxy_pass http://192.168.1.123/api; #5.转发地址
        } 
       }

替换nginx.conf文件，将此文件复制到容器中

docker cp  /opt/nginx.config   sad_gates:/etc/nginx/nginx.conf

在容器中创建dist文件夹，将dist内容复制到容器中
```
docker cp  /opt/dist   sad_gates:/opt/dist
```

二、重启容器

docker restart 容器名