# Nginx UI
もう一つのNginx Web UI [0xJacky](https://jackyu.cn/), [Hintay](https://blog.kugeek.com/), [Akino](https://github.com/akinoccc)によって開発されました。
[](https://deepwiki.com/0xJacky/nginx-ui)
[](https://github.com/0xJacky/nginx-ui/actions/workflows/build.yml)
[](https://github.com/0xJacky/nginx-ui "Click to view the repo on Github")
[](https://github.com/0xJacky/nginx-ui/releases/latest "Click to view the repo on Github")
[](https://github.com/0xJacky/nginx-ui "Click to view the repo on Github")
[](https://github.com/0xJacky/nginx-ui "Click to view the repo on Github")
[](https://github.com/0xJacky/nginx-ui "Click to view the repo on Github")
[](https://github.com/0xJacky/nginx-ui/issue "Click to view the repo on Github")
[](https://hub.docker.com/r/uozi/nginx-ui "Click to view the image on Docker Hub")
[](https://hub.docker.com/r/uozi/nginx-ui "Click to view the image on Docker Hub")
[](https://hub.docker.com/r/uozi/nginx-ui "Click to view the image on Docker Hub")
[](https://weblate.nginxui.com/engage/nginx-ui/)
[](https://hellogithub.com/repository/86f3a8f779934748a34fe6f1b5cd442f)
## ドキュメント
公式ドキュメントは [nginxui.com](https://nginxui.com) を参照してください。
## スター推移
[](https://starchart.cc/0xJacky/nginx-ui)
English | [Español](README-es.md) | [简体中文](README-zh_CN.md) | [繁體中文](README-zh_TW.md) | [Tiếng Việt](README-vi_VN.md) | [日本語](README-ja_JP.md)
目次
-
プロジェクトについて
-
はじめに
-
手動ビルド
-
Linux用スクリプト
- Nginx リバースプロキシ設定例
- 貢献方法
- ライセンス
## プロジェクトについて
### デモ
URL：[https://demo.nginxui.com](https://demo.nginxui.com)
- ユーザー名：admin
- パスワード：admin
### 機能
- サーバーの CPU 使用率、メモリ使用率、ロードアベレージ、ディスク使用率 とかの指標をオンラインで見られるんやで。
- 設定変更したら自動でバックアップ作ってくれて、バージョン比較＆復元もできるんやわ。
- クラスタ管理で複数ノードへのミラーリング操作もサポートしてるから、大規模環境でも楽勝や。
- 暗号化した Nginx / Nginx UI の設定をエクスポートして、新環境へのデプロイ＆復旧がサクッとできるで。
- オンライン ChatGPT アシスタント（Deepseek-R1 のチェインオブソート表示付き）で設定の最適化や理解をサポートしてくれるんや。
- MCP（Model Context Protocol）で AI エージェントが Nginx UI と連携できる特別インターフェースもあるから、自動化もバッチリや。
- ワンクリックで Let’s Encrypt 証明書の発行＆自動更新もしてくれるし。
- 自社開発の **NgxConfigEditor**（ブロックエディタ）か、**Ace Code Editor**（LLM コード補完＆シンタックスハイライト付き）で nginx 設定を直感的に編集でけるんや。
- Nginx ログのオンライン閲覧機能もあるで。
- Go と Vue で書かれとって、配布物は単一バイナリだからセットアップも簡単や。
- 保存時に設定テスト→nginx 再読み込みまで自動でやってくれるで。
- Web ターミナル
- ダークモード対応
- レスポンシブデザイン
### 多言語化
公式でサポートしてんのは：
- 英語
- 簡体字中国語
- 繁體字中国語
非ネイティブの英語話者やから完璧ちゃうかもしれへんけど、気づいたことあったらフィードバックしてや！
コミュニティのおかげで他の言語もいろいろ揃っとるで。翻訳に参加したい人は [Weblate](https://weblate.nginxui.com) 見てみてな。
### 主要技術
- [Go言語](https://go.dev)
- [Gin Web Framework](https://gin-gonic.com)
- [GORM](http://gorm.io)
- [Vue 3](https://v3.vuejs.org)
- [Vite](https://vitejs.dev)
- [TypeScript](https://www.typescriptlang.org/)
- [Ant Design Vue](https://antdv.com)
- [vue3-gettext](https://github.com/jshmrtn/vue3-gettext)
- [vue3-ace-editor](https://github.com/CarterLi/vue3-ace-editor)
- [Gonginx](https://github.com/tufanbarisyildirim/gonginx)
- [lego](https://github.com/go-acme/lego)
## はじめに
### 使用前の注意
Nginx UIはDebian系Webサーバ設定ファイルの標準に準拠します。
作成されたサイト設定ファイルは、自動検出されたNginx設定フォルダ内の`sites-available`に配置されます。有効化されたサイトは`sites-enabled`にシンボリックリンクが作成されます。
非Debian系（Ubuntu以外）の場合は、以下のように`nginx.conf`をDebianスタイルに変更してください。
```nginx
http {
# ...
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}
```
詳細: [debian/conf/nginx.conf](https://salsa.debian.org/nginx-team/nginx/-/blob/master/debian/conf/nginx.conf#L59-L60)
### インストール
Nginx UIは以下のプラットフォームで利用可能です:
- macOS 11 Big Sur and later (amd64 / arm64)
- Windows 10 and later (amd64 / arm64)
- Linux 2.6.23 and later (x86 / amd64 / arm64 / armv5 / armv6 / armv7 / mips32 / mips64 / riscv64 / loongarch64)
- Including but not limited to Debian 7 / 8, Ubuntu 12.04 / 14.04 and later, CentOS 6 / 7, Arch Linux
- FreeBSD
- OpenBSD
- Dragonfly BSD
- Openwrt
最新リリースは[リリースページ](https://github.com/0xJacky/nginx-ui/releases/latest)からダウンロード、または[Linux用インストールスクリプト](#script-for-linux)を利用
### 使い方
初回起動後、ブラウザで`http://:`にアクセスし、初期設定を完了してください。
#### 実行ファイルから
**ターミナルでNginx UIを動かす**
```shell
nginx-ui -config app.ini
```
`Control+C`で終了します。
**バックグラウンドでNginx UIを動かす**
```shell
nohup ./nginx-ui -config app.ini &
```
以下のコマンドでNginx UIを停止する。
```shell
kill -9 $(ps -aux | grep nginx-ui | grep -v grep | awk '{print $2}')
```
#### Systemdで
[Linuxインストールスクリプト](#script-for-linux)を使うと、`nginx-ui`というsystemdサービスが作成されます。以下コマンドで操作可能:
**起動**
```shell
systemctl start nginx-ui
```
**停止**
```shell
systemctl stop nginx-ui
```
**再起動**
```shell
systemctl restart nginx-ui
```
#### Dockerで
公式イメージ [uozi/nginx-ui:latest](https://hub.docker.com/r/uozi/nginx-ui) はベースに公式 nginx イメージを利用しています。ホストの Nginx と置き換える形で利用可能です。
##### 注意
1. 初回利用時は `/etc/nginx` にマッピングするボリュームが空であることを確認してください。
2. 静的ファイルを配信する場合は、適切なディレクトリをマッピングしてください。
Dockerでデプロイ
1. [Dockerをインストール](https://docs.docker.com/install/)
2. 以下のように実行:
```bash
docker run -dit \
--name=nginx-ui \
--restart=always \
-e TZ=Asia/Shanghai \
-v /mnt/user/appdata/nginx:/etc/nginx \
-v /mnt/user/appdata/nginx-ui:/etc/nginx-ui \
-v /var/run/docker.sock:/var/run/docker.sock \
-p 8080:80 -p 8443:443 \
uozi/nginx-ui:latest
```
3. パネルには `[http://:8080/install](http://:8080/install)` でアクセスします。
Docker-Composeでデプロイ
1. [Docker-Composeをインストール](https://docs.docker.com/compose/install/)
2. 以下内容の`docker-compose.yml`を作成:
```yml
services:
nginx-ui:
stdin_open: true
tty: true
container_name: nginx-ui
restart: always
environment:
- TZ=Asia/Shanghai
volumes:
- '/mnt/user/appdata/nginx:/etc/nginx'
- '/mnt/user/appdata/nginx-ui:/etc/nginx-ui'
- '/var/www:/var/www'
- '/var/run/docker.sock:/var/run/docker.sock'
ports:
- 8080:80
- 8443:443
image: 'uozi/nginx-ui:latest'
```
3. コンテナの起動:
```bash
docker compose up -d
```
4. パネルには `[http://:8080/install](http://:8080/install)` でアクセスします。
## 手動ビルド
公式ビルドがないプラットフォーム向けに、以下の手順でビルドできます。
### 前提条件
- Make
- Golang 1.23+
- node.js 21+
```shell
npx browserslist@latest --update-db
```
### フロントエンドのビルド
`app` ディレクトリで以下を実行：
```shell
pnpm install
pnpm build
```
### バックエンドのビルド
フロントエンドビルド後、プロジェクトルートで：
```shell
go generate
go build -tags=jsoniter -ldflags "$LD_FLAGS -X 'github.com/0xJacky/Nginx-UI/settings.buildTime=$(date +%s)'" -o nginx-ui -v main.go
```
## Linux用スクリプト
### 基本的な使い方
**インストール & アップグレード**
```shell
bash -c "$(curl -L https://raw.githubusercontent.com/0xJacky/nginx-ui/main/install.sh)" @ install
```
デフォルトのリスニングポートは `9000`、HTTP チャレンジポートは `9180` です。
競合する場合は `/usr/local/etc/nginx-ui/app.ini` を編集し、`systemctl restart nginx-ui` を実行してください。
**設定・DB を残してアンインストール**
```shell
bash -c "$(curl -L https://raw.githubusercontent.com/0xJacky/nginx-ui/main/install.sh)" @ remove
```
### その他の使い方
````shell
bash -c "$(curl -L https://raw.githubusercontent.com/0xJacky/nginx-ui/main/install.sh)" @ help
````
## Nginx リバースプロキシ設定例
```nginx
server {
listen 80;
listen [::]:80;
server_name ;
rewrite ^(.*)$ https://$host$1 permanent;
}
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
server {
listen 443 ssl;
listen [::]:443 ssl;
http2 on;
server_name ;
ssl_certificate /path/to/ssl_cert;
ssl_certificate_key /path/to/ssl_cert_key;
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
proxy_pass http://127.0.0.1:9000/;
}
}
```
## 貢献方法
オープンソースコミュニティへの貢献は**大歓迎**です。
改善提案がある場合はリポジトリをフォークし、プルリクエストを作成してください。
Issueに「enhancement」タグをつけて提案することもできます。
スターもよろしくお願いします！
1. リポジトリをフォーク
2. フィーチャーブランチ作成 (`git checkout -b feature/AmazingFeature`)
3. 変更をコミット (`git commit -m 'Add some AmazingFeature'`)
4. ブランチをプッシュ (`git push origin feature/AmazingFeature`)
5. プルリクエストを作成
## ライセンス
本プロジェクトは GNU Affero General Public License v3.0 に基づき配布されています。ライセンスの詳細は [LICENSE](LICENSE) ファイルをご覧ください。
