Node+express builds web server and deploys front-end projects

Time:2022-9-21

Traditional front-end project deployment relies on the tomcat service as a static resource server. With the separation of front-end and back-end processes, front-end projects need to be deployed separately. For front-end deployment, in addition to using nginx to build a static resource server, we can also use node to build a web server. Let me share with you how to use node to build a web server:

1. Install the node environment on the server
Node+express builds web server and deploys front-end projects
1. Enter the weblogic directory and download the node binary file package (free of compilation)

sudo  wget  https://nodejs.org/dist/v8.14.0/node-v8.14.0-linux-x64.tar.gz

If wget is not available, you can download wget first: sudo yum -y install wget
2. Unzip the file

sudo tar zxvf node-v8.14.0-linux-x64.tar.gz

3. Configure node environment variables

sudo vim /etc/profile

Add NODE_HOME, configure export path

export NODE_HOME = /home/weblogic/node-v8.14.0-linux-x64.tar.gz

Execute the command to make the file take effect
source /etc/profile
4. Install npm
curl https://npmjs.org/install.sh | sh
5. Check if the environment is installed successfully
Execute node –version and npm -v to view the version number
Node+express builds web server and deploys front-end projects

Second, the server script

1. server.js script
If you know nodejs, the script is easy to understand. Here is the content of the server.js startup script:
The script uses the express framework and uses our packaged dist directory as a static resource. After receiving the client request, since the vue project is a single-page application, we only need to return index.html to the client.

const fs = require("fs");
const path = require("path");
const express = require("express");
const app = express();

app.use(express.static(path.resolve(__dirname, "./dist")));

app.get("*", function (req, res) {
  console.log(req);
  const html = fs.readFileSync(path.resolve(__dirname, "./dist/index.html"), "utf-8");
  res.send(html);
});

app.listen(8082, () => {
  console.log("Server is running at http://10.29.43.152:8082");
});

This is a very simple script for express as a web service. If your vue project uses mock services and does not involve back-end interfaces, the above content can satisfy pure front-end deployment. If it involves interface calls and cross-domain solutions, it is recommended to use http-proxy, http-proxy-middleware middleware for interface address proxying

2. Middleware module

const proxy = require('http-proxy-middleware');
var options = {
        target: 'http://10.29.43.152:8090', // your server port
        changeOrigin: true,
    };
var exampleProxy = proxy(options);
app.use('/', exampleProxy); // '/' means proxy for all requests

Just add the above code.

3. Log module
If you want to build a more complete express web service, you may also need an excellent log module
Recommended UsemorganMiddleware, you can click this link to view the detailed usage:https://www.npmjs.com/package/morgan
4. Other middleware
Of course you may also use other express middleware such as:
Application-level middleware, routing-level middleware, error handling middleware, built-in middleware, third-party middleware (combined with the actual situation of the project, you can choose the corresponding middleware for cooperation and construction) I won't go into too much detail here, you can refer to express framehttps://www.expressjs.com.cn/4x/api.html

3. Packaging and Deployment
1. Upload server.js and front-end projects to the server
After packaging the server.js and front-end projects, upload them to the frontEnd directory of the server.
Node+express builds web server and deploys front-end projects
2. Start the service
Add package.json on the server side and install the express package that server.js depends on to start. Execute the npm install command to automatically install
Node+express builds web server and deploys front-end projects
Next we run:
node server.jsStart the service:
Node+express builds web server and deploys front-end projects
After running successfully, we can see that our web server has been started successfully.
3. Open the page for verification
Node+express builds web server and deploys front-end projects
Click login, we can see the project page
Node+express builds web server and deploys front-end projects

Note: Since I am using a mock service here, it does not involve back-end interface calls, so it can be treated as a purely static front-end resource. In real projects, proxy and cross-domain solutions will be used. If the above content does not meet your needs, you can leave a message in the comment area and discuss together! !

Recommended Today

Convert between C# timestamp and standard time

The conversion between C# timestamp and standard time is actually not difficult, but it is necessary to pay attention to the problem of reference time. Start GMT: January 1, 1970 at 00:00:00.000 Start Beijing time: 08:00:00.000 on January 1, 1970 Yesterday I stepped on the pit here, and I used the timestamp calculated by Greenwich […]