Location>code7788 >text

The front-end project is published to Linux via Nginx, and access to the back-end interface is configured via rewrite.

Popularity：891 ℃/2024-09-19 11:34:51

X. Preamble

This article briefly demonstrates how to publish a front-end project to Linux by deploying the arco framework front-end project to CentOS 7 and accessing the WebAPI interface on the same server.

For more information about the steps to publish WebAPI to Linux, please refer to the previous posts of this blogger: /hnzhengfy/p/18384107/webapi_centos 。

I. Simply create a front-end project, based on Arco Design Vue

1.1 Environment preparation and project creation

The first thing is to install nodejs in advance, pay attention to the version will have an impact, this article recommends installing the 18.20.0 version directly, the following 1.2 in the summary of the problem and then explained in detail.

The download address can be used with an AliCloud mirror address: /nodejs-release/ 。

Then install arco cli:

npm i -g arco-cli

Once the above environment is ready, it is time to initialize the project. It is as follows:

// Initialize the sample project
E:\OneSelf\ArcoDesignVueWorkSpace>npm init

        ___ ____ _
       / | ______________ / __ \ ___ _____(_)___ _____
      / /| | / ___/ ___/ __ \/ / / / / \/ ___/ __ `/ \ \
     / ___ | / / / / / / / / / / / / / / / / / / / / / / / / / / __(__ ) / /_/ / / / / / / /
    /_/ |_/ /_/ \___/\____/_____/\___/____/_//\__, /_/ /_/
                                             /____/

                                                v1.27.5

? Path already exists, confirmed to overwrite it? E:\OneSelf\ArcoDesignVueWorkSpace\ Yes
? Please select the technology stack you wish to use Vue
Vue Please select the type of project you wish to create Arco Pro Project
? Please select the Arco Pro template Full version (with all pages)

Project is being initialized in E:\OneSelf\ArcoDesignVueWorkSpace\
√ Obtaining the project template was successful.
√ Copying of template content is complete.
√ Adaptation of template content is complete.
√ Project dependency installation completed.
******************************************************************************
  Read for help information. Execute the following command to start
    $ cd
    $ pnpm run dev
******************************************************************************

Finally, run the project directly:

E:\OneSelf\ArcoDesignVueWorkSpace\>npm run dev

> [email protected] dev
> vite --config ./config/


  VITE v3.2.10  ready in 2940 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

By address http://localhost:5173/ To access, log in directly to view the example page:

Finally, you can package the example project with the command npm run build for backup.

1.2 Problems encountered

1.2.1 Initialization failure [Error: spawnSync EINVAL].

// Error report details:
errno: -4071, code: 'EINVAL', syscall: 'spawnSync ', path: '',
arco design Error initializing project: x Failed to copy template content Error: spawnSync EINVAL

The reason is that child_process.spawn has a vulnerability (CVE-2024-27980)-(HIGH), which requires { shell: true } to be added to the call. 2024.4.10 node fixed this vulnerability, and the code executes incorrectly. cli downloads arco-design-pro-vue and executes it to . cli\ and a spawn error occurs.

Workaround: Just use versions prior to 18.20.2,20.12.2,21.17.3. I used version 18.20.0 on it. Aliyun download address of each version: /nodejs-release/

Reference:/arco-design/arco-cli/issues/92

1.2.2 Expired mirror address certificate

// false：
request to /axios failed,reason: certificate has expired

Just update the mirror address.

// Backing up your npm configuration first prevents you from losing it during the changeover process
npm config get > npm_config.txt
npm config set registry
npm install --save-dev @arco-design/web-vue
npm i -g arco-cli

1.2.3 Failure of project dependencies

// Error Reporting Details：
× Project Dependency An Failure，You can try installing the project dependencies manually later
Error: Command 「yarn 」 executed failed:
warning ..\: No license field
warning gifsicle > bin-build > tempfile > [email protected]: Please upgrade to version 7 or higher.
。。。

Solution:

  • Open the command line and switch to the project directory, e.g. cd your_project_directory.
  • Run the following command to clear the previous dependency cache: yarn cache clean.
  • Update the project's dependency package: yarn upgrade.
  • Reinstall the project dependencies: yarn install.

Nginx installation and configuration

The installation steps are detailed in the blogger's previous posts (Nginx installation and testing:/hnzhengfy/p/#_label3), which will not be repeated in this article.

Configuration file location: /usr/local/nginx/conf in .

Execution program location: nginx in /usr/local/nginx/sbin.

2.1 Nginx File Configuration

Upload the packaged front-end test files to Linux, in this case to the /home/ folder.

Configuration general idea:

  • In front-end projects, there are actually two types of requests, one for page loading and the other for accessing back-end interfaces for data manipulation.
  • How to distinguish between these two operations? Well, you can only do that by requesting the path, and uniformly tagging the path of the interface request with something like /apiarco.
  • Then again, the tokens in this path are not available in the back-end interface, so they need to be replaced in Nginx, i.e., URL rewriting.
  • After rewriting the request, it will reach the candidate api service directly, but of course it is necessary to configure the backend to allow cross-domain access.

The following is the server module in the Nginx configuration file:

    server {
        listen 8001;
        listen [::]:8001;
        server_name _;
        root /home/; # Set the root directory of the server to /home/

        location / {
                root /home/ ;
                index ; # Try to find or files in order
                try_files $uri $uri/ /; # If these files are not found, it returns /
        }
        # /apiarco paths containing this flag are handled specially
        location /apiarco {
                proxy_pass http://localhost:5000/; # Proxy the request to local port 5000, which is the api interface address.
                rewrite ^/apiarco/(. *)$ /$1 break; # Rewrite the URL to remove the /apiarco prefix.
        }
        error_page 500 502 503 504 /;; # URL rewrite to remove the /apiarco prefix }
        location = / {
            root html; }
        }
    }

When deploying multiple front-end services at the same time, you can configure another server node, for example:

    server {
        listen       8002;
        listen       [::]:8002;
        server_name  _;
        root         /home/;

        location / {
                root   /home/;
                index   ;
                try_files $uri $uri/ /;
        }
        location /apiarconew {
                proxy_pass http://localhost:5000/;
                rewrite ^/apiarconew/(.*)$ /$1 break;
        }
        error_page   500 502 503 504  /;
        location = / {
            root   html;
        }
    }
<Previous Next>