Table of Contents
NginxConfig Introduction
Installation
Install Node.js
API网站配置
Home Operation and Maintenance Nginx How to use Nginx open source visual configuration tool NginxConfig

How to use Nginx open source visual configuration tool NginxConfig

May 18, 2023 pm 07:29 PM
nginx nginxconfig

NginxConfig Introduction

NginxConfig Known asThe only Nginx configuration tool you need, you can use the visual interface to generate Nginx configuration, the function is very powerful, it is available on Github There are 15K Star!

How to use Nginx open source visual configuration tool NginxConfig

The following is a rendering of the use of NginxConfig, you can take a look!

How to use Nginx open source visual configuration tool NginxConfig

Installation

Next, we will introduce the installation of NginxConfig. It is relatively convenient to install it on Linux.

Install Node.js

Since NginxConfig is a front-end project based on Vue, we must first install Node.js.

First download the installation package of Node.js from the official website

Download address: https://nodejs.org/zh-cn/download/

How to use Nginx open source visual configuration tool NginxConfig

After the download is successful, unzip the installation package to the /usr/local/src/ directory and use the following command;

cd /usr/local/src/
tar xf node-v16.14.2-linux-x64.tar.xz
cd node-v16.14.2-linux-x64/
./bin/node -v
Copy after login

Use the ./bin/node -v command to view the currently installed version;

How to use Nginx open source visual configuration tool NginxConfig

If you want to run it directly from the Linux command line, you also need to # The ##node and npm commands create soft links;

ln -s /usr/local/src/node-v16.14.2-linux-x64/bin/node /usr/bin/node
ln -s /usr/local/src/node-v16.14.2-linux-x64/bin/npm /usr/bin/npm
node -v
npm -v
Copy after login

After the creation is completed, use the command to view the version. At this point, the

Node.js installation is complete.

How to use Nginx open source visual configuration tool NginxConfig

Install NginxConfig

Node.jsAfter the installation is complete, you can start the installationNginxConfig .

First download the installation package of

NginxConfig,

Download address: https://github.com/digitalocean/nginxconfig.io

How to use Nginx open source visual configuration tool NginxConfig

After the download is complete, extract it to the specified directory, and use the

npm command to install the dependencies and run it;

tar -zxvf nginxconfig.io-master.tar.gz
npm install
npm run dev
Copy after login

NginxConfigAfter successful operation, You can access it directly. It is quite good to see that the interface supports Chinese. Access address: http://192.168.3.105:8080

How to use Nginx open source visual configuration tool NginxConfig

Use

Next we will experience the visual configuration generation function of

NginxConfig to see if it is powerful enough!

Preparation for use

First we need to install Nginx. For Nginx installation, please refer to the Nginx usage tutorial written before;

We will implement the following functions through static proxy To access static websites in different directories, access the API interface provided by SpringBoot through a dynamic proxy;

# 静态代理,访问mall文档网站
docs.macrozheng.com
# 静态代理,访问mall前端项目
mall.macrozheng.com
# 动态代理,访问mall线上API
api.macrozheng.com
Copy after login

You need to modify the local host file in advance.

192.168.3.105 docs.macrozheng.com

192.168.3.105 mall.macrozheng.com
192.168.3.105 api.macrozheng.com

Documentation website Configuration

Let’s first configure access to the mall document website. The domain name is: docs.macrozheng.com.

Select

default as the front end in NginxConfig, then modify the service configuration, configure the site, path and running directory;

How to use Nginx open source visual configuration tool NginxConfig

If you don’t need HTTPS, you can choose not to enable it;

How to use Nginx open source visual configuration tool NginxConfig

Then remove it in

Global Configuration->Security Content-Security-Policy Settings;

How to use Nginx open source visual configuration tool NginxConfig

Then modify the

Performance configuration, enable Gzip compression, and delete the resource validity limit.

How to use Nginx open source visual configuration tool NginxConfig

Front-end website configuration

Let’s configure access to the mall front-end website. The domain name is: mall.macrozheng.com.

Next we add another site and modify the service configuration. The rest is basically the same as above.

How to use Nginx open source visual configuration tool NginxConfig

API网站配置

最后配置下mall的Swagger API文档网站的访问,域名为:api.macrozheng.com。

继续添加一个站点,修改服务配置,只需修改站点名称即可;

How to use Nginx open source visual configuration tool NginxConfig

然后启用反向代理并设置,反向代理到线上API;

How to use Nginx open source visual configuration tool NginxConfig

路由功能暂时不用可以关闭。

How to use Nginx open source visual configuration tool NginxConfig

使用配置 接下来我们就可以直接下载NginxConfig给我们生成好的配置了;

How to use Nginx open source visual configuration tool NginxConfig

我们先来看下NginxConfig给我们生成的配置内容,这种配置手写估计要好一会吧;

How to use Nginx open source visual configuration tool NginxConfig

点击按钮下载配置,完成后改个名字,然后上传到Linux服务器的Nginx配置目录下,使用如下命令解压;

tar -zxvf nginxconfig.io.tar.gz
Copy after login

大家可以看到NginxConfig将为我们生成如下配置文件;

How to use Nginx open source visual configuration tool NginxConfig

接下来将我们之前的mall文档网站和mall前端网站放到Nginx的html目录下,然后重启Nginx就可以查看效果了;

docker restart nginx
Copy after login

先访问下我们的mall文档网站,访问地址:http://docs.macrozheng.com/

How to use Nginx open source visual configuration tool NginxConfig

在访问下mall的前端网站,访问地址:http://mall.macrozheng.com

How to use Nginx open source visual configuration tool NginxConfig

最后访问下mall的API文档网站,访问地址:http://api.macrozheng.com/swagger-ui.html

How to use Nginx open source visual configuration tool NginxConfig

The above is the detailed content of How to use Nginx open source visual configuration tool NginxConfig. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to allow external network access to tomcat server How to allow external network access to tomcat server Apr 21, 2024 am 07:22 AM

To allow the Tomcat server to access the external network, you need to: modify the Tomcat configuration file to allow external connections. Add a firewall rule to allow access to the Tomcat server port. Create a DNS record pointing the domain name to the Tomcat server public IP. Optional: Use a reverse proxy to improve security and performance. Optional: Set up HTTPS for increased security.

What are the nginx start and stop commands? What are the nginx start and stop commands? Apr 02, 2024 pm 08:45 PM

The start and stop commands of Nginx are nginx and nginx -s quit respectively. The start command starts the server directly, while the stop command gracefully shuts down the server, allowing all current requests to be processed. Other available stop signals include stop and reload.

How to run thinkphp How to run thinkphp Apr 09, 2024 pm 05:39 PM

Steps to run ThinkPHP Framework locally: Download and unzip ThinkPHP Framework to a local directory. Create a virtual host (optional) pointing to the ThinkPHP root directory. Configure database connection parameters. Start the web server. Initialize the ThinkPHP application. Access the ThinkPHP application URL and run it.

Welcome to nginx!How to solve it? Welcome to nginx!How to solve it? Apr 17, 2024 am 05:12 AM

To solve the "Welcome to nginx!" error, you need to check the virtual host configuration, enable the virtual host, reload Nginx, if the virtual host configuration file cannot be found, create a default page and reload Nginx, then the error message will disappear and the website will be normal show.

How to deploy nodejs project to server How to deploy nodejs project to server Apr 21, 2024 am 04:40 AM

Server deployment steps for a Node.js project: Prepare the deployment environment: obtain server access, install Node.js, set up a Git repository. Build the application: Use npm run build to generate deployable code and dependencies. Upload code to the server: via Git or File Transfer Protocol. Install dependencies: SSH into the server and use npm install to install application dependencies. Start the application: Use a command such as node index.js to start the application, or use a process manager such as pm2. Configure a reverse proxy (optional): Use a reverse proxy such as Nginx or Apache to route traffic to your application

How to register phpmyadmin How to register phpmyadmin Apr 07, 2024 pm 02:45 PM

To register for phpMyAdmin, you need to first create a MySQL user and grant permissions to it, then download, install and configure phpMyAdmin, and finally log in to phpMyAdmin to manage the database.

How to solve the problem of nginx when accessing the website How to solve the problem of nginx when accessing the website Apr 02, 2024 pm 08:39 PM

nginx appears when accessing a website. The reasons may be: server maintenance, busy server, browser cache, DNS issues, firewall blocking, website misconfiguration, network connection issues, or the website is down. Try the following solutions: wait for maintenance to end, visit during off-peak hours, clear your browser cache, flush your DNS cache, disable firewall or antivirus software, contact the site administrator, check your network connection, or use a search engine or web archive to find another copy of the site. If the problem persists, please contact the site administrator.

How to communicate between docker containers How to communicate between docker containers Apr 07, 2024 pm 06:24 PM

There are five methods for container communication in the Docker environment: shared network, Docker Compose, network proxy, shared volume, and message queue. Depending on your isolation and security needs, choose the most appropriate communication method, such as leveraging Docker Compose to simplify connections or using a network proxy to increase isolation.

See all articles