React Project Deployment

The React project can be deployed in various modes. The following sections introduce the deployment modes that you are familiar with

React deployment was introduced in the first React series, mainly because it is simple and easy to operate.

To make the code operable. The React project deployed here uses the simplest possible React project.

Create the React project

Before installation, the construction of the relevant environment will not be introduced in detail, a lot of online information

Run the following command to create a React project.

$ npm create-react-app helloreact
Copy the code

The effect is as follows:

Then, switch to the HelloReact directory as prompted and execute NPM start

In order to ensure that the react project is not the fault of the react project, we first start the React project as shown in the picture. The effect is as follows, indicating that the React project can be accessed normally. We can also deploy the project users.

Now that the React project is created, we can deploy the React project that is already created and working.

The deployment modes are described here.

Deploy through Node’s static services

Run the following command to install the static server

$ > npm install -g serve
Copy the code

-g indicates a global installation, so you don’t need to reinstall it when deploying other React projects.

005_ install the serve server using the NPM. PNG

Run the following command to package the React project deployment package

$> npm run build
Copy the code

After packaging, run the server service using the following command

$serve -s build -l 8080 007_ Run the react project using the serve commandCopy the code

Note that -l is required to specify the port number. If not specified, the default port number is 3000

Results the following

We can also start the React project with serve-s specifying the absolute path to the build directory.

The related commands are as follows

$> serve -s /opt/program/react/study/helloreact/build -l 8080
Copy the code

Deploy the React project using serve in Ubuntu

There’s a problem: I can’t transfer the React build package to Ubuntu.

Run the zip command to package the build folder in the React project

$> zip build.zip build
Copy the code

The zip command is used to package the zip package because zip software is installed by default on centos or Ubuntu.

Next, upload the build.zip package to your Linux system. The selected system is Ubuntu. Here I use the SCP command to transfer files between the two systems. The related commands are as follows

Deploy the React project using Docker

Docker installation and use will not be explained here. If you have any questions, please refer to juejin.cn/post/703453…

Copy the production deployment package to the Docker image instead of copying the source code to the Docker image. During the image generation process, package the production deployment package to the Docker image.

The Dockerfile contains the following contents:

React project FROM node:14 as buildstep WORKDIR /app COPY build /app/build Create and run the Nginx server, FROM nginx:alpine COPY -- FROM =buildstep /app/build/ /usr/share/nginx/ HTML EXPOSE 80 CMD ["nginx","-g","daemon off;"]Copy the code

The command to generate an image file using Dockerfile is as follows. The -t parameter can be used to delete the previous image each time before it is generated.

$> docker build -t reat-web .
Copy the code

Run the following command to start the image

$> docker run -d -p 54321:80 react-web
Copy the code

Areas that can be improved

When the image is generated, specify the version number of the image instead of latest every time

Meanwhile, the old image should be saved.

Change record