前后端部署到一台服务器,nginx代理
调用的思路:浏览器访问nginx,跳转到 root下访问dist文件,然后通过dist内的页面触发nginx的proxy_pass 路径去请求后台接口。注意:前端不用部署在tomcat上,不要在宝塔面板上的软件商店直接安装nginx,连默认首页都访问不到1、vue项目前端 修改部分main.jsaxios.defaults.baseURL = '/study_online_api'//此地址对应n
调用的思路:浏览器访问nginx,跳转到 root下访问dist文件,然后通过dist内的页面触发nginx的proxy_pass 路径去请求后台接口。
注意:前端不用部署在tomcat上,不要在宝塔面板上的软件商店直接安装nginx,连默认首页都访问不到
1、vue项目前端 修改部分
main.js
axios.defaults.baseURL = '/study_online_api' //此地址对应nginx代理的location配置,后面有相关配置
vue.config.js
module.exports = {
publicPath: '/',
outputDir: 'dist',//打包后输出
assetsDir: 'static',//静态文件输出地址
}
本地执行npm run build生成打包文件
宝塔面板新建文件 /download/study-online
把打包文件放在宝塔文件的/download/study-online
2、nginx配置文件
这里listen:80是nginx监听浏览器访问的端口,localhost 就是服务器地址。
服务器地址是121.41.42.236。
比如我访问地址是121.41.42.236:80,会自动跳转到dist文件下的index页面,然后登录时触发的请求,
如:http://121.41.42.236:80/web_blog_api/web_blog/user/getAllUser 会转发到 http://121.41.42.236:8089/web_blog/user/getAllUser
部署多个前端项目,用root指定公共目录前缀,再配合alias指定dist的全路径,配置文件如下
user root;
#并发处理数
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;
root /download;
#charset koi8-r;
#access_log logs/host.access.log main;
#blog
location /blog {
alias /download/web-blog/dist;
index index.html index.htm;
}
location /web_blog_api/ {
proxy_pass http://121.41.42.236:8089/;
}
location /study {
alias /download/studyonline/dist;
index index.html index.htm;
}
location /study_online_api/ {
proxy_pass http://121.41.42.236:8082/;
}
#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;
}
}
}
更多推荐
所有评论(0)