1. 前言
由于项目使用的前后端分离结构,采用nginx作为服务器代理前端解决跨域问题。
阅读本文之前,需要有了解过Docker、Vue、Nginx、CORS
内容。
文章之前,有必要介绍一下CORS:跨域资源共享(Cross-origin resource sharing)
什么叫同源,必须同时满足
以下三点:
- 协议相同
- 域名相同
- 端口相同
2. 部署
2.1 使用Vue生成前端文件
npm install
npm run build:dev
注意
:
这里前端配置访问后端的BASE_API地址一定是前端的地址
‘http://172.18.3.29’,因为同源策略,这里不能配置为后端地址。
重点是在Nginx配置代理,完成后端接口的转发,完成跨域。
2.2 创建Docker file文件
Dockerfile 文件内容如下:
# 基础镜像使用Nginx
FROM nginx
# 作者
MAINTAINER leosong121
# 添加时区环境变量,亚洲,上海
ENV TimeZone=Asia/Shanghai
# 使用软连接,并且将时区配置覆盖/etc/timezone
RUN ln -snf /usr/share/zoneinfo/$TimeZone /etc/localtime && echo $TimeZone > /etc/timezone
# 将前端dist文件中的内容复制到nginx目录
COPY dist/ /etc/nginx/html/
# 覆盖镜像的Nginx配置
COPY nginx.conf /etc/nginx/nginx.conf
注意
:
使用Nginx镜像中的默认配置文件nginx.conf并进行修改添加,笔者在做测试的时候,出现了一堆奇奇怪怪的问题,包括访问过程中的404 error,后续笔者直接从nginx官网下载了nginx linux版本
,
并拷贝出里边的nginx.conf文件来基于此文件配置,一切问题得以解决(大家如果采用的window部署,那就下载windows版本的nginx.conf,里边的配置也是不一样的。):
2.3 配置Nginx代理
nginx.conf文件内容如下:
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
#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 html;
}
# 配置代理,解决跨域问题
location ^~ /service/ {
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 X-NginX-Proxy true;
proxy_pass http://172.18.3.50:2000/;
}
# 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;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
2.4 Docker打包镜像并运行镜像
docker build -t leosong/leotest-web .
docker run --name $leotest-web -d -p 80:80 leosong/leotest-web
2.5 测试
可以看到
如果访问:http://localhost/#/login?redirect=%2Fdashboard,是会报错同源策略的,因为localhost和访问的访问的后端BASE_URL='http://172.18.3.29’是不同源的。
访问:http://172.18.3.29/ 正常。
3. 踩坑总结
问题一:
最开始前端打包的时候,BASE_URL='http://172.18.3.50’后端地址,这样并不能解决跨域,查看console一直出现跨域错误;
解决办法:
因为在linux 使用Docker + nginx部署十分不方便,估直接windows开启一套一样的环境,效率大大提高,直接从vue打包BASE_URL前端地址,测试就没有出现跨域的问题了;
问题二:
使用nginx镜像部署,出现404 error;
解决办法:
因为在本地调试是没有问题的,估尝试了几次以为是nginx.conf里边的代理没有写对,发现问题依然没有解决;
然后没得办法,直接查看日志 docker logs -f ContainerId,看到日志说找不到大概路径是: /usr/share/html/service/XXXXX,所以大概猜测是nginx镜像的conf文件
和一般linux nginx配置不太一样,最后直接使用linux nginx的conf文件解决问题;