外挂文件，使用nginx部署vue并 解决前后端跨域问题"/>
docker配置nginx外挂文件，使用nginx部署vue并 解决前后端跨域问题
第一部分、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 andworking. Further configuration is required.</p><p>For online documentation and support please refer to<a href="/">nginx</a>.<br/>Commercial support is available at<a href="/">nginx</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的
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/;
7、访问ip 就可以了
更多推荐
docker配置nginx外挂文件,使用nginx部署vue并 解决前后端跨域问题
发布评论