Shulou(Shulou.com)05/31 Report--

This article mainly explains the "Rainbond on the front-end project Vue and React continuous deployment method", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "Rainbond on the front-end project Vue and React continuous deployment method"!

Foreword:

In the past, we deployed Vue and React front-end projects in several ways:

After the project is packaged, the dist directory is generated, put it into nginx, and access is configured accordingly.

Package the project and put it in tomcat.

Put the static and index.html files in the packaged dist directory of the project into the resources directory of the springboot project

Run a front-end server directly, similar to the one developed locally.

The first method is also used to deploy the Vue React project in Rainbond, which automatically build according to the source code, and automatically put the static files into the nginx after packaging.

There are three specifications for deploying a Vue React project in Rainbond:

1.Rainbond will identify it as a Vue React front-end project based on whether the source code root directory contains nodestatic.json and * * package.json * * files.

two。 One of the following two files must exist in the source code root directory (not both):

When this file exists in package-lock.json, Rainbond is built using the npm package manager by default.

When this file exists in yarn.lock, Rainbond is built using the yarn package manager.

3. The web.conf file, which is the configuration file for nginx, needs to exist in the root of the source code. Without this file, Rainbond takes the default configuration.

Pre-deployment check

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

Clean up all local node_modules dependencies and see if they can be successfully packaged using npm run build or other commands.

Next, use this Vue project to demonstrate that the Fork open source project

1.1 add nodestatic.json files

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

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

{"path": "dist"}

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

{"path": "project/dist"} 1.2 add a web.conf file

After the project is compiled, Rainbond runs the front-end project using Nginx (1.14.2) by default. Users can add the web.conf file under the source code root to specify the configuration of Nginx, which is used to define run-time parameters. Without this file, Rainbond takes the default configuration. Reference configuration use cases are as follows:

By default, all files in the packaged dist directory will be placed in the container's / 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 Rainbond

1.3 Source deployment Vue project

This time, the Vue project is used for demonstration, and so is the React project.

This project source code address Fork open source project if according to

1.3.1 create components based on source code reference build official documents based on source code

Fill in the address of the source code warehouse and the front end subdirectory ruoyi-ui to build the Vue project

Confirm that the component is created, and the platform will automatically recognize the language as Nodestatic.

Create and 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 in component > build source.

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

Modify and rebuild until complete, and then visit the page.

common problem

Visit page 403 after deployment for the following reasons:

1. Packaging is not successful, resulting in incomplete products.

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

two。 The packaging path is incorrectly defined, making it impossible for the Rainbond build process to get the built static file.

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

Rainbond cloud native application management platform to achieve micro-service architecture without changing the code, managing Kubernetes without learning containers, helping enterprises to implement applications on the cloud, and continuously delivering any enterprise applications to Kubernetes clusters, hybrid clouds, multi-clouds and other infrastructure. It is the supporting platform of Rainstore cloud native application store.

Thank you for your reading, the above is the content of "Rainbond's method of continuous deployment of front-end project Vue and React". After the study of this article, I believe you have a deeper understanding of Rainbond's method of continuous deployment of front-end project Vue and React, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.