docker配置nginx外挂文件，使用nginx部署vue并解决前后端跨域问题

落日映苍穹つ 2023-01-08 08:13 114阅读 0赞

**第一部分、Linux安装nginx**

**Docker****安装并配置nignx挂载文件**

**前提**

下载了docker，并且docker是运行中的状态

**systemctl status docker** **查看docker的状态**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

**开始如下操作**

**1、搜索nginx  docker search nginx**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

**2、下载nginx镜像: docker pull nginx **

**Docker pull nginx****的name**

**比如 docker pull jwilder/nginx-proxy**

**查看下载的镜像 docker images**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2][]

**注意，不要创建nginx容器，因为现在我们需要把手动创建的nginx文件与docker容器里面的文件一一对应起来。**

**3、手动创建挂载文件**

命令：mkdir -p /root/nginx/\{conf,www,logs\}

以上命令是创建root文件夹，如果有的话就不用创建，

在root文件夹下面创建nginx文件夹，nginx文件夹下面创建三个文件夹conf  www  logs

![20210119151508361.png][]

**4****、cd /root/nginx/conf下，创建nginx.conf文件**

**命令是:  cd / root /nginx/conf**

**         Touch nginx.conf**

**5****、编辑nginx.conf文件  命令:vi nginx.conf**

**内容是**

user  root;
    
    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  192.168.209.236;
    
            location / {
    
                root   /usr/share/nginx;
    
                index  index.html index.htm;
    
                try_files $uri $uri/ /index.html;}}

**然后:wq退出保存**

**注意这里的/usr/share/nginx  这个是docker安装nginx时候默认的html的路径。前提是在docker还没有创建nginx容器时，这里的路径可以更改，一旦创建，构成映射关系以后，绝对不能更改，一旦更改就会报错404,403等。**

**如果你需要更改nginx的首页内容的话，只需要在外挂的/root/nginx/www 下面更改index.html的内容就可以了，根据创建时候的映射关系，自动更改/usr/share/nginx下idnex.html的内容**

**6****、cd到/docker/nginx/html下**

**创建一个index.html文件  命令如下touch index.html**

**7****、编辑这个文件  vi index.html**

**内容如下**

<!DOCTYPE html>
    
    <html>
    
    <head>
    
    <title>Welcome to nginx!</title>
    
    <style>
    
        body {
    
            width: 35em;
    
            margin: 0 auto;
    
            font-family: Tahoma, Verdana, Arial, sans-serif;
    
        }
    
    </style>
    
    </head>
    
    <body>
    
    <h1>tjn19961228</h1>
    
    <p>If you see this page, the nginx web server is successfully installed and
    
    working. Further configuration is required.</p>
    
    <p>For online documentation and support please refer to
    
    <a href="http://nginx.org/">nginx.org</a>.<br/>
    
    Commercial support is available at
    
    <a href="http://nginx.com/">nginx.com</a>.</p>
    
    
    
    <p><em>Thank you for using nginx.</em></p>
    
    </body>
    
    </html>

**:wq****保存退出**

**8****、docker images 查看nginx的镜像名称**

**9****、创建nginx容器**

**docker run --name mynginx -d -p 80:80**

** -v /root/nginx/conf/nginx.conf:/etc/nginx/nginx.conf**

** -v /root /nginx/www:/usr/share/nginx**

** -v /root /nginx/logs:/var/log/nginx -d nginx**

**最后一个nginx是你镜像名称，因为我的镜像名称本来就是nginx，所以就是Nginx.**

**解释一下以上的命令**

**把我们创建的nginx必需文件与docker安装nginx的配置文件一一对应起来，这样做的目的，为了方便配置Nginx，只需要在外挂文件里面修改,docker里面nginx的配置文件根据映射关系自动更改了。**

**映射关系只有在创建容器的时候出现一次，所以我们在nginx.conf里面配置的root /usr/share/nginx    这个绝对绝对不能变。**

**我们如果想要改变nginx首页的内容，只需要更改外挂文件/root/nginx/www下面index.html的内容就可以了。**

**10****、判断是否安装成功   ip:80 如192.168.209.236:80**

![20210119151557794.png][]

**重要的事情说三次，如果要更改nginx首页的内容，只需要在nginx的外挂文件/root/nginx/www下更改Index.html的内容就可以了。不需要重启docker里面的nginx。**

# **第二部分、nginx部署vue项目** #

**1、vue****项目的打包**

**      npm run build**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3][]

**2、把dist下的文件通过sftp上传到www下**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 4][]

**现在输入ip就可以访问vue前端了，但是有一个问题，前端连不上后端？  **

**不急， 往下看**

# **第三部分、nginx配置前后端的跨域问题** #

1.  **linux****安装tomcat，启动tomcat，确保tocmat启动没有问题**
2.  **打包springboot项目，成一个war包**
3.  **把war包放在tomcat的webapps下**
4.  **启动tomcat**
5.   
6.  **在nginx里面配置跨域问题**

user  root;
    
    worker_processes  1;
    
    #pid        logs/nginx.pid;
    
    events {
    
        worker_connections  1024;
    
    }
    
    http {
    
        include       mime.types;
    
        default_type  application/octet-stream;
    
        sendfile        on;
    
        keepalive_timeout  65;
    
        server {
    
            listen       80;
    
            server_name  192.168.209.236;
    
            location / {
    
                root   /usr/share/nginx;
    
                index  index.html index.htm;
    
                try_files $uri $uri/ /index.html;
    
    }
    
               location ^~ /prod-api/ {
    
               proxy_pass http://192.168.209.236:8080/ruoyi-admin/;
    
                                }
    
        }
    
    }

**注意的点**

**1****、我们的前端是80端口，我们监听的是80端口，因此我们在一个server里面写**

**2****、prod-api是根据vue里面请求后端的时候的设置的，一致，不是凭空出来的**

**比如vue-cli3的**

![20210119151711592.png][]

**3、记住prod-api之前需要有^~，不然匹配不到。**

**我们可以在浏览器的network查看前端跨域的请求，就知道为什么需要加^~了**

**4****、8080端口，是因为我的项目部署在tomcat下，而且，你后端项目设置的端口与tomcat的端口需要一致。**

**5****、ruoyi-admin是我打包后springboot项目war包的名字，因为打包成war包以后，访问后端的请求，就必须加上项目名称**

**6****、不要忘记/   一个是^~ /prod-api/   一个是**[**http://192.168.209.236:8080/ruoyi-admin/**][http_192.168.209.236_8080_ruoyi-admin]**;**

**7****、访问ip 就可以了**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20221119/7b528fb3f3a345a798cdcc7eb41419d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20221119/48d1f8d502b944e78da818eba768ffb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2]: /images/20221119/2948c519620743839a24f0aabc8c0313.png
[20210119151508361.png]: /images/20221119/3712dbdd8489450baf48cc3925b8e5b8.png
[20210119151557794.png]: /images/20221119/0e314d07b16e4527abb09e775f981cda.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3]: /images/20221119/4738504f85e54c7c9d97306bc5e22d49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 4]: /images/20221119/a57821c9409e43c9bb484ff2c68b7317.png
[20210119151711592.png]: /images/20221119/41a7931abd37495282978368144af03a.png
[http_192.168.209.236_8080_ruoyi-admin]: http://192.168.209.236:8080/ruoyi-admin/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 5]: /images/20221119/c1a8af35283041759f537f8a98c3ffbe.png