Deployment of Front and rear End Separation Project (1)

I bought a cloud service for fun. As front-end development, relatively new to project deployment, take this opportunity to try. Improve yourself. Content is more basic, big guy do not spray!

1. Foreground code configuration

Demo is developed based on VUE. Related development configurations are as follows:

Development related configuration:

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

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

devServer: {
    proxy: {
      "/api": {
        target: "Http://real server IP address :3000/".// Background service deployment port
        ws: true.changeOrigin: true.pathRewrite: {
          // Path overwrite
          "/api": "".If you have a path behind you, it will be automatically concatenated}},}},Copy the code

Packaging configuration

module.exports = {
  publicPath: "/vuemusic/".//nginx static file access path...};Copy the code

2. Background service description

Background services for big guy development of “netease cloud music API”, github link

The service is deployed on port 3000 by default. Listen for requests on port 3000. The request path starts at the root directory

3. Deployment problems

Prerequisite: My server is CentOS 7.5 64-bit. The static server is Nginx. Please find the installation method by yourself.

Problem: My nginx service has port 80, but the background service has port 3000. Involves cross-domain issues.

• My Nginx configuration:

    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;



        Proxy all requests starting with API to port 3000
        Http://real server IP/ API /song/url? id=33894312
        Http://real server 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;
        }
        For other requests, the default port is 80
        location / {
        }

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

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
      }
Copy the code

• Static file deployment directory vuemusic:

The storage path will affect the publicPath packed by vUE and nginx configuration.

Last words: the deployment, but also out of a lot of topics. Baidu to solve their own. Knowledge will continue to be updated on additional deployment issues. Welcome comments and guidance.