Nginx オープンソースのビジュアル設定ツール NginxConfig の使用方法

NginxConfig の概要

NginxConfig 必要な唯一の Nginx 構成ツール として知られ、ビジュアル インターフェイスを使用して Nginx 構成を生成でき、この機能は非常に強力です、Github で入手できます 15,000 のスター があります!

以下は NginxConfig の使用例を示したものです。ぜひご覧ください。

インストール

次に、Linux にインストールすると比較的便利な NginxConfig のインストールを紹介します。 。

Node.js のインストール

NginxConfig は Vue に基づくフロントエンド プロジェクトであるため、最初に Node.js をインストールする必要があります。 ＃＃＃。

まず、公式 Web サイトから

Node.js のインストール パッケージをダウンロードします。

ダウンロード アドレス: https://nodejs.org/zh-cn/download /

ダウンロードが成功したら、インストール パッケージを

/usr/local/src/ ディレクトリに解凍し、次のコマンドを使用します。

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

./bin/node -v コマンドを使用して、現在インストールされているバージョンを表示します。

それを直接実行する場合は、 Linux コマンド ラインからは、

node および npm コマンドでソフト リンクを作成することも必要です。##<pre class="brush:bash;">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</pre>作成が完了したら、コマンドを使用してこの時点で、

Node.js

のインストールは完了です。

NginxConfig のインストール

Node.js

インストールが完了したら、インストールを開始できますNginxConfig 。

まず、

NginxConfig

のインストール パッケージをダウンロードします。ダウンロード アドレス: https://github.com/digitalocean/nginxconfig.io

ダウンロードが完了したら、指定したディレクトリに解凍し、

npm

コマンドを使用して依存関係をインストールして実行します。<pre class="brush:bash;">tar -zxvf nginxconfig.io-master.tar.gz npm install npm run dev</pre>

NginxConfig

操作が成功すると、直接アクセスできるようになります。インターフェイスが中国語をサポートしていることは非常に良いことです。アクセス アドレス: http://192.168.3.105:8080

#使用

次に、

NginxConfig

のビジュアル構成生成機能を体験して、十分に強力であるかどうかを確認します。

使用前の準備

まず、Nginx をインストールする必要があります。Nginx のインストールについては、以前に書いた Nginx の使い方チュートリアルを参照してください。

以下を実装します。静的プロキシを介した機能 異なるディレクトリにある静的 Web サイトにアクセスするには、動的プロキシを介して SpringBoot が提供する API インターフェイスにアクセスします;

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

事前にローカル ホスト ファイルを変更する必要があります。

192.168.3.105 docs.macrozheng.com

192.168.3.105 mall.macrozheng.com

192.168.3.105 api.macrozheng.com

ドキュメント Web サイト設定

まず、モール ドキュメント Web サイトへのアクセスを設定しましょう。ドメイン名は docs.macrozheng.com です。

NginxConfig

でフロントエンドとして

default を選択し、サービス構成を変更し、サイト、パス、実行ディレクトリを構成します。

HTTPS が必要ない場合は、HTTPS を有効にしないことを選択できます。

その後、グローバル構成で削除します。 ->Security

Content-Security-Policy 設定;

次に、Performance

構成を変更し、Gzip 圧縮を有効にします。 、リソースの有効期限を削除します。

フロントエンド Web サイトの構成

モールのフロントエンド Web サイトへのアクセスを構成しましょう。ドメイン名は mall.macrozheng.com です。 。

次に、別のサイトを追加してサービス構成を変更します。残りは基本的に上記と同じです。

API网站配置

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

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

然后启用反向代理并设置，反向代理到线上API；

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

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

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

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

tar -zxvf nginxconfig.io.tar.gz

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

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

docker restart nginx

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

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

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

以上がNginx オープンソースのビジュアル設定ツール NginxConfig の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。