前后端分离项目部署实战(1)

366 阅读2分钟

最新一时脑热,买了个云服务玩玩。作为前端开发,对项目部署比较生疏,借这个机会就尝试下。提高自己。内容比较基础,大佬勿喷!

1.前台代码配置

demo基于vue开发,相关开发配置如下:

开发相关配置:

import axios from "axios";
const service = axios.create({
  baseURL: "/api/", 
  timeout: 5000, // request timeout
});

==========================================================

devServer: {
    proxy: {
      "/api": {
        target: "http://真实服务器IP:3000/", //后台服务部署端口
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          // 路径重写
          "/api": "", // 这个意思就是以api开头的,定向到哪里, 如果你的后边还有路径的话, 会自动拼接上
        },
      },
    },
}

打包配置

module.exports = {
  publicPath: "/vuemusic/", //nginx静态文件访问路径
  .
  .
  .
};

2.后台服务说明

后台服务为大佬开发的 ”网易云音乐API“,github链接

服务默认部署在3000端口。监听3000端口下的请求。请求路径为根目录开始

3.部署问题

前提说明:我的服务器为 CentOS 7.5 64位 。 静态服务器为nginx。安装方法请自行百度。

问题:我这边nginx服务为80端口,但是后台服务为3000端口。牵扯跨域问题。

  • 我的nginx配置:
    server {
        listen       80;
        server_name  localhost1;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;



        #将所有以api开头的请求都代理到3000端口
        # 浏览器访问 http://真实服务器IP/api/song/url?id=33894312 
        # 实际在访问 http://真实服务器IP:3000/song/url?id=33894312
        location /api/ {
            proxy_pass http://localhost:3000/;
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
        # 其他请求,都默认走80端口
        location / {
        }

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
      }
  • 静态文件部署存放目录【vuemusic】:

image.png

此处存放路径,会影响vue打包的 publicPath ,以及nginx的相关配置。

后话:本次部署,也是出了很多为题。自己百度解决。后续其他部署问题还会继续更新相关知识。欢迎大佬评论指导。