Deploy Vue and React Front-end Projects

Foreword

In the past, we had several methods to deploy Vue and React front-end projects:

  • After the project is packaged, generate the dist directory, put it into nginx, and perform the corresponding access configuration.
  • Pack the project into tomcat.
  • Put the static and index.html files in the dist directory of the packaged project into the resources directory of the springboot project
  • Run a front-end server directly, similar to that of local development.

Deploying the Vue React project in Kato also uses the first method, automatically build according to the source code, and automatically putting the static files into nginx after packaging.

Deploy Vue in Kato React project has the following three specifications:

  • Kato will recognize the files as Vue and React front-end projects based on whether there are nodestatic.json and package.json files in the source code root directory.

One of the following two files must exist in the root directory of the source code (cannot exist at the same time):

  • When the file package-lock.json exists, Kato is built using the npm package manager by default.

  • When the file yarn.lock exists, Kato is built using the yarn package manager.

The web.conf file must exist in the root directory of the source code, which is the configuration file of nginx. Without this file, Kato will use the default configuration.

Before Kato deploys its own Vue and React projects, you need to check whether the project is available:

  • Clean up all dependencies of the local node_modules, whether you can use npm run build or other commands package successful.

Next, use this Vue project https://gitee.com/zhangbigqi/RuoYi-Vue.git to demonstrate, Fork open source project Ruoyi

1.1 Add nodestatic.json file

Create a file nodestatic.json in the root directory of the source code and fill in the following content.

This file specifies the output directory of static files after compilation. Generally, Vue projects are packaged and output to the project root directory dist by default.

{
	"path": "dist"
}

If your project is packaged, the directory output is not the project root directory, but a folder under the root directory, for example: project/dist, you need to modify the nodestatic.json file

{
	"path": "project/dist"
}

1.2 Add web.conf file

After the project is compiled, Kato will use Nginx (1.14.2) by default to run the front-end project. The user can add the web.conf file in the root directory of the source code to specify the configuration of Nginx. The function of this file is to define runtime parameters. Without this file, Kato will use the default configuration. The reference configuration example is as follows:

By default, all files in the packaged dist directory will be placed in the container /app/www

server {
    listen 5000;
    
    location / {
        root /app/www;
        try_files $uri $uri/ /index.html;
        index index.html index.htm;
    }
}

With the above files, you can build Vue and React projects in Kato

1.3 Source code deployment Vue project

This time we use the Vue project for demonstration, and the React project is also the same.

The source code address of this project https://gitee.com/zhangbigqi/RuoYi-Vue.git Fork open source project Ruoyi

1.3.1 Create components based on source code

Refer to Official Document

  • Fill in the source code repository address, fill in the front terminal directory ruoyi-ui, and build the Vue project
  • Confirm to create the component, the platform will automatically recognize the language as Nodestatic.
  • Create, wait for the build component to complete.

The domestic npm Taobao source is used by default, which can be viewed in the component build source

  • This open source project is special. The default packaging command is not npm run build, but npm run build:prod. You need to modify the build command to this command in Component> Build Source.

The default packaging commands in Kato are npm run build and yarn run build

Rebuild after modification, and visit the page until completion. ✌️

Common Problems

Visit the page 403 after the deployment is completed, there are several reasons:

The packaging was not successful, resulting in incomplete product.

Check the build log carefully to confirm the cause of the error. Or delete all dependent packages locally and re-verify whether the project can be built normally.

The packaging path is defined incorrectly, causing the Kato build process to fail to obtain the static files after the build.

Refer to section 1.1 above to correctly configure the project packaging path.