【Laravel】Swagger UIのドキュメントをLaravelのソースの外に出す

# はじめに

こんにちは、プログラミングを始めて約3年のエンジニアのkeitaMaxです。

前回Laravelのpublicファイル下にSwagger UIのdistをおきました。
今回は、public下ではなくLaravelのソース外において違うポート番号でアクセスしてみれるようにしようと思います。

前回の記事



Dockerの設定をした記事

https://qiita.com/keitaMax/items/7bc51212a32a6418aa1c

# Docker修正

以下を`docker-compose.yml`ファイルに追加しました。

```yml:docker-compose.yml
  swagger:
    build:
      context: ./docker/swagger
      dockerfile: Dockerfile
    ports:
      - 8082:81
    depends_on:
      - app
    volumes:
      - ./swagger/:/app/swagger
```

dockerフォルダ下に'swagger'ファイルを作成し、その下に`Dockerfile`と`default.conf`を作成しました。

```Dockerfile:Dockerfile
FROM nginx:1.25-alpine

ENV TZ Asia/Tokyo

COPY ./default.conf /etc/nginx/conf.d/default.conf

WORKDIR /app/swagger
```


```conf:default.conf
server {
    listen 81;
    server_name swagger.example.com;
    root /app/swagger;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;

        add_header Access-Control-Allow-Origin "*";
        add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
        add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
        add_header Access-Control-Allow-Credentials true;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass app:9000;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}
```
また、`docker-compose.yml`ファイルと同じ階層に`swagger`ファイルを作成します。


※以下の記述はCORS解決のために記載しています。

```con
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
add_header Access-Control-Allow-Credentials true;
```

# Swagger UIの引越し

前回作成したLaravelのpublic下にある'swagger'ファイルを、`docker-compose.yml`ファイルと同じ階層の`swagger`ファイルに移動させます。

`swagger-initializer.js`を以下のように修正します。

```js:swagger-initializer.js
window.onload = function() {
  //<editor-fold desc="Changeable Configuration Block">

  // the following lines will be replaced by docker/configurator, when it runs in a docker-container
  window.ui = SwaggerUIBundle({
    url: "http://localhost:8081/swagger.json", //修正
    dom_id: '#swagger-ui',
    deepLinking: true,
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: "StandaloneLayout"
  });

  //</editor-fold>
};

```

# Dockerを立ち上げて確認する

これで以下コマンドでDockerを起動します。

```
docker-compose up -d --build
```

これでDockerが起動したので、以下URLにアクセスしてSwagger UIのドキュメントを見てみます。

```
http://localhost:8082/index.html
```

![スクリーンショット 2024-03-24 2.17.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/64374c30-4b5f-1148-4272-360d177cf920.png)

これでLaravelのソースから分離することができました。


# おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！