16 KiB

Nginx UI
もう一つのNginx Web UI 0xJacky, Hintay, Akinoによって開発されました。
ドキュメント
公式ドキュメントは nginxui.com を参照してください。
スター推移
English | Español | 简体中文 | 繁體中文 | Tiếng Việt | 日本語
目次
プロジェクトについて
デモ
- ユーザー名: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 見てみてな。
主要技術
- Go言語
- Gin Web Framework
- GORM
- Vue 3
- Vite
- TypeScript
- Ant Design Vue
- vue3-gettext
- vue3-ace-editor
- Gonginx
- lego
はじめに
使用前の注意
Nginx UIはDebian系Webサーバ設定ファイルの標準に準拠します。
作成されたサイト設定ファイルは、自動検出されたNginx設定フォルダ内のsites-available
に配置されます。有効化されたサイトはsites-enabled
にシンボリックリンクが作成されます。
非Debian系(Ubuntu以外)の場合は、以下のようにnginx.conf
をDebianスタイルに変更してください。
http {
# ...
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}
インストール
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
You can visit latest release to download the latest distribution, or just use installation scripts for Linux.
最新リリースはリリースページからダウンロード、またはLinux用インストールスクリプトを利用
使い方
初回起動後、ブラウザでhttp://<your_server_ip>:<listen_port>
にアクセスし、初期設定を完了してください。
実行ファイルから
ターミナルでNginx UIを動かす
nginx-ui -config app.ini
Control+C
で終了します。
バックグラウンドでNginx UIを動かす
nohup ./nginx-ui -config app.ini &
以下のコマンドでNginx UIを停止する。
kill -9 $(ps -aux | grep nginx-ui | grep -v grep | awk '{print $2}')
Systemdで
Linuxインストールスクリプトを使うと、nginx-ui
というsystemdサービスが作成されます。以下コマンドで操作可能:
起動
systemctl start nginx-ui
停止
systemctl stop nginx-ui
再起動
systemctl restart nginx-ui
Dockerで
Our docker image uozi/nginx-ui:latest is based on the latest nginx image and can be used to replace the Nginx on the host. By publishing the container's port 80 and 443 to the host, you can easily make the switch. 公式イメージ uozi/nginx-ui:latest はベースに公式 nginx イメージを利用しています。ホストの Nginx と置き換える形で利用可能です。
注意
- 初回利用時は
/etc/nginx
にマッピングするボリュームが空であることを確認してください。 - 静的ファイルを配信する場合は、適切なディレクトリをマッピングしてください。
Dockerでデプロイ
-
以下のように実行:
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
- パネルには
[http://<your-ip>:8080/install](http://<your_server_ip>:8080/install)
でアクセスします。
Docker-Composeでデプロイ
-
以下内容の
docker-compose.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'
- コンテナの起動:
docker compose up -d
- パネルには
[http://<your-ip>:8080/install](http://<your_server_ip>:8080/install)
でアクセスします。
手動ビルド
公式ビルドがないプラットフォーム向けに、以下の手順でビルドできます。
前提条件
-
Make
-
Golang 1.23+
-
node.js 21+
npx browserslist@latest --update-db
フロントエンドのビルド
app
ディレクトリで以下を実行:
pnpm install
pnpm build
バックエンドのビルド
フロントエンドビルド後、プロジェクトルートで:
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用スクリプト
基本的な使い方
インストール & アップグレード
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 を残してアンインストール
bash -c "$(curl -L https://raw.githubusercontent.com/0xJacky/nginx-ui/main/install.sh)" @ remove
その他の使い方
bash -c "$(curl -L https://raw.githubusercontent.com/0xJacky/nginx-ui/main/install.sh)" @ help
Nginx リバースプロキシ設定例
server {
listen 80;
listen [::]:80;
server_name <your_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 <your_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」タグをつけて提案することもできます。 スターもよろしくお願いします!
- リポジトリをフォーク
- フィーチャーブランチ作成 (
git checkout -b feature/AmazingFeature
) - 変更をコミット (
git commit -m 'Add some AmazingFeature'
) - ブランチをプッシュ (
git push origin feature/AmazingFeature
) - プルリクエストを作成
ライセンス
本プロジェクトは GNU Affero General Public License v3.0 に基づき配布されています。ライセンスの詳細は LICENSE ファイルをご覧ください。