<div align="center">
      <img src="resources/logo.png" alt="Nginx UI Logo">
</div>

# Nginx UI

もう一つのNginx Web UI [0xJacky](https://jackyu.cn/), [Hintay](https://blog.kugeek.com/), [Akino](https://github.com/akinoccc)によって開発されました。

[![DeepWiki](https://img.shields.io/badge/DeepWiki-0xJacky%2Fnginx--ui-blue.svg?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAyCAYAAAAnWDnqAAAAAXNSR0IArs4c6QAAA05JREFUaEPtmUtyEzEQhtWTQyQLHNak2AB7ZnyXZMEjXMGeK/AIi+QuHrMnbChYY7MIh8g01fJoopFb0uhhEqqcbWTp06/uv1saEDv4O3n3dV60RfP947Mm9/SQc0ICFQgzfc4CYZoTPAswgSJCCUJUnAAoRHOAUOcATwbmVLWdGoH//PB8mnKqScAhsD0kYP3j/Yt5LPQe2KvcXmGvRHcDnpxfL2zOYJ1mFwrryWTz0advv1Ut4CJgf5uhDuDj5eUcAUoahrdY/56ebRWeraTjMt/00Sh3UDtjgHtQNHwcRGOC98BJEAEymycmYcWwOprTgcB6VZ5JK5TAJ+fXGLBm3FDAmn6oPPjR4rKCAoJCal2eAiQp2x0vxTPB3ALO2CRkwmDy5WohzBDwSEFKRwPbknEggCPB/imwrycgxX2NzoMCHhPkDwqYMr9tRcP5qNrMZHkVnOjRMWwLCcr8ohBVb1OMjxLwGCvjTikrsBOiA6fNyCrm8V1rP93iVPpwaE+gO0SsWmPiXB+jikdf6SizrT5qKasx5j8ABbHpFTx+vFXp9EnYQmLx02h1QTTrl6eDqxLnGjporxl3NL3agEvXdT0WmEost648sQOYAeJS9Q7bfUVoMGnjo4AZdUMQku50McDcMWcBPvr0SzbTAFDfvJqwLzgxwATnCgnp4wDl6Aa+Ax283gghmj+vj7feE2KBBRMW3FzOpLOADl0Isb5587h/U4gGvkt5v60Z1VLG8BhYjbzRwyQZemwAd6cCR5/XFWLYZRIMpX39AR0tjaGGiGzLVyhse5C9RKC6ai42ppWPKiBagOvaYk8lO7DajerabOZP46Lby5wKjw1HCRx7p9sVMOWGzb/vA1hwiWc6jm3MvQDTogQkiqIhJV0nBQBTU+3okKCFDy9WwferkHjtxib7t3xIUQtHxnIwtx4mpg26/HfwVNVDb4oI9RHmx5WGelRVlrtiw43zboCLaxv46AZeB3IlTkwouebTr1y2NjSpHz68WNFjHvupy3q8TFn3Hos2IAk4Ju5dCo8B3wP7VPr/FGaKiG+T+v+TQqIrOqMTL1VdWV1DdmcbO8KXBz6esmYWYKPwDL5b5FA1a0hwapHiom0r/cKaoqr+27/XcrS5UwSMbQAAAABJRU5ErkJggg==)](https://deepwiki.com/0xJacky/nginx-ui)

[![Build and Publish](https://github.com/0xJacky/nginx-ui/actions/workflows/build.yml/badge.svg)](https://github.com/0xJacky/nginx-ui/actions/workflows/build.yml)
[![GitHub license](https://img.shields.io/github/license/0xJacky/nginx-ui?label=License&logo=github)](https://github.com/0xJacky/nginx-ui "Click to view the repo on Github")
[![Release Version](https://img.shields.io/github/release/0xJacky/nginx-ui?include_prereleases&label=Release&logo=github)](https://github.com/0xJacky/nginx-ui/releases/latest "Click to view the repo on Github")
[![GitHub Star](https://img.shields.io/github/stars/0xJacky/nginx-ui?label=Stars&logo=github)](https://github.com/0xJacky/nginx-ui "Click to view the repo on Github")
[![GitHub Fork](https://img.shields.io/github/forks/0xJacky/nginx-ui?label=Forks&logo=github)](https://github.com/0xJacky/nginx-ui "Click to view the repo on Github")
[![Repo Size](https://img.shields.io/github/repo-size/0xJacky/nginx-ui?label=Size&logo=github)](https://github.com/0xJacky/nginx-ui "Click to view the repo on Github")
[![GitHub Fork](https://img.shields.io/github/issues-closed-raw/0xJacky/nginx-ui?label=Closed%20Issue&logo=github)](https://github.com/0xJacky/nginx-ui/issues "Click to view the repo on Github")

[![Docker Stars](https://img.shields.io/docker/stars/uozi/nginx-ui?label=Stars&logo=docker)](https://hub.docker.com/r/uozi/nginx-ui "Click to view the image on Docker Hub")
[![Docker Pulls](https://img.shields.io/docker/pulls/uozi/nginx-ui?label=Pulls&logo=docker)](https://hub.docker.com/r/uozi/nginx-ui "Click to view the image on Docker Hub")
[![Image Size](https://img.shields.io/docker/image-size/uozi/nginx-ui/latest?label=Image%20Size&logo=docker)](https://hub.docker.com/r/uozi/nginx-ui "Click to view the image on Docker Hub")

[![Translated Status](https://weblate.nginxui.com/widget/nginx-ui/frontend/svg-badge.svg)](https://weblate.nginxui.com/engage/nginx-ui/)
[![Featured｜HelloGitHub](https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=86f3a8f779934748a34fe6f1b5cd442f&claim_uid=MOFqadzAShCBeQj&theme=small)](https://hellogithub.com/repository/86f3a8f779934748a34fe6f1b5cd442f)

## ドキュメント
公式ドキュメントは [nginxui.com](https://nginxui.com) を参照してください。

## スター推移

[![Stargazers over time](https://starchart.cc/0xJacky/nginx-ui.svg)](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)

<details>
  <summary>目次</summary>
  <ol>
    <li>
      <a href="#about-the-project">プロジェクトについて</a>
      <ul>
        <li><a href="#demo">デモ</a></li>
        <li><a href="#features">機能</a></li>
        <li><a href="#internationalization">多言語化</a></li>
        <li><a href="#built-with">主要技術</a></li>
      </ul>
    </li>
    <li>
      <a href="#getting-started">はじめに</a>
      <ul>
        <li><a href="#before-use">使用前の注意</a></li>
        <li><a href="#installation">インストール</a></li>
        <li>
          <a href="#usage">使い方</a>
          <ul>
            <li><a href="#from-executable">実行ファイルから</a></li>
            <li><a href="#with-systemd">Systemdで</a></li>
            <li><a href="#with-docker">Dockerで</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#manual-build">手動ビルド</a>
      <ul>
        <li><a href="#prerequisites">前提条件</a></li>
        <li><a href="#build-app">フロントエンドのビルド</a></li>
        <li><a href="#build-backend">バックエンドのビルド</a></li>
      </ul>
    </li>
    <li>
      <a href="#script-for-linux">Linux用スクリプト</a>
      <ul>
        <li><a href="#basic-usage">基本的な使い方</a></li>
        <li><a href="#more-usage">その他の使い方</a></li>
      </ul>
    </li>
    <li><a href="#example-of-nginx-reverse-proxy-configuration">Nginx リバースプロキシ設定例</a></li>
    <li><a href="#contributing">貢献方法</a></li>
    <li><a href="#license">ライセンス</a></li>
  </ol>
</details>

## プロジェクトについて

![ダッシュボード](resources/screenshots/dashboard_en.png)

### デモ
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://<your_server_ip>:<listen_port>`にアクセスし、初期設定を完了してください。

#### 実行ファイルから
**ターミナルで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. 静的ファイルを配信する場合は、適切なディレクトリをマッピングしてください。

<details>
<summary><b>Dockerでデプロイ</b></summary>

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://<your-ip>:8080/install](http://<your_server_ip>:8080/install)` でアクセスします。
</details>

<details>
<summary><b>Docker-Composeでデプロイ</b></summary>

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://<your-ip>:8080/install](http://<your_server_ip>:8080/install)` でアクセスします。

</details>

## 手動ビルド

公式ビルドがないプラットフォーム向けに、以下の手順でビルドできます。

### 前提条件

- 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     <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」タグをつけて提案することもできます。
スターもよろしくお願いします！

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) ファイルをご覧ください。
