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

最新推荐文章于 2024-06-12 14:37:16 发布

qq_37591637

最新推荐文章于 2024-06-12 14:37:16 发布

阅读量2.4k

点赞数 1

分类专栏： Docker

本文链接：https://blog.csdn.net/qq_37591637/article/details/112836688

版权

Docker 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第一部分、Linux安装nginx

Docker安装并配置nignx挂载文件

前提

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

systemctl status docker 查看docker的状态

开始如下操作

1、搜索nginx docker search nginx

2、下载nginx镜像: docker pull nginx

Docker pull nginx的name

比如 docker pull jwilder/nginx-proxy

查看下载的镜像 docker images

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

3、手动创建挂载文件

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

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

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

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

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

第二部分、nginx部署vue项目

1、vue项目的打包

npm run build

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

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

不急，往下看

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

linux安装tomcat，启动tomcat，确保tocmat启动没有问题
打包springboot项目，成一个war包
把war包放在tomcat的webapps下
启动tomcat
在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的