前后端分离项目部署实战（1）-一一网

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

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 {
        }
      }
复制代码