Express+Node.js/ 서버 배포 시 , swagger ui가 제대로 안 뜨고 html 코드로 뜨는 경우에 대해서....+webpack

갑자기 잘만 뜨던 swagger ui가 아래처럼 html 코드로 떠버렸다.

 

진짜 원인을 몰랐다. 서버 재빌드한 것도 아니고, 잘 되다가, 잘 되나? 하고 접속하니 위와 같은 화면이 보였다.

프론트팀이 swagger ui를 보고 연동을 해야 하는데, 안돼서 후다다다닥 고치기 시작했다.

 

하지만... 

원인을 모르니, 삽질을 하기 시작했다. 스택오버플로우도 나에게 자유를 주지 않았다.

나는 swagger-autogen 을 같이 사용한 경우다.

 

내가 시도한 해결법

1. swagger 관련 모듈 재설치

2. swagger-ouput.json 재생성

3. nginx /swagger 경로 처리

4. app.js  /swagger 라우팅 선언을 최상단에...

 

위 해결법으로는 저어어언혀 해결되지 않았다. 😠🤮

 

이걸 고치기 시작한 지 , 10시간 째..........

혹시나 webpack 문제인가? 싶어서 swagger,webpack 키워드를 넣어서 재검색해보았다.

 

검색해보니, 아래 글을 읽고 코드를 변경하여 시도해보니 해결되었다.

https://github.com/scottie1984/swagger-ui-express/issues/90#issuecomment-578096992

Swagger UI + Webpack: no such file or directory, open 'C:\indexTemplate.html' · Issue #90 · scottie1984/swagger-ui-express

 

아래 코드는 내가 설정한 webpack.config.js 파일이다.

 

저 Copywebpackpulgin을 통해 Swagger UI의 CSS 및 JS 파일을 복사한다. 

 Copywebpackpulgin는 모듈이기에 설치해주자!!

npm install copy-webpack-plugin --save-dev

const nodeExternals = require("webpack-node-externals");
const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin"); // CopyWebpackPlugin 추가

module.exports = {
  mode: "production",
  entry: {
    bundle: path.resolve(__dirname, "app.js"),
  },
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
        exclude: /node_modules/,
      },
    ],
  },
  target: "node",
  externalsPresets: {
    node: true,
  },
  externals: [nodeExternals()],
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'node_modules/swagger-ui-dist/swagger-ui.css', to: 'swagger-ui.css' },
        { from: 'node_modules/swagger-ui-dist/swagger-ui-bundle.js', to: 'swagger-ui-bundle.js' },
        { from: 'node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js', to: 'swagger-ui-standalone-preset.js' },
        { from: 'node_modules/swagger-ui-dist/favicon-16x16.png', to: 'favicon-16x16.png' },
        { from: 'node_modules/swagger-ui-dist/favicon-32x32.png', to: 'favicon-32x32.png' }
      ]
    })
  ]
};

 

 

 

그리고 혹시나 해서, 혹시나 swagger-ouput.json을 못알아먹는 걸까 싶어서, 단단히 app.js에서도 경로를 다 추가해두었다.

const swaggerUi = require("swagger-ui-express");
const swaggerFile = require('./swagger/swagger-output.json')


app.use(
  '/swagger',
  swaggerUi.serve,
  swaggerUi.setup(swaggerFile, {
      swaggerOptions: {
          url: '/swagger/swagger-output.json', // swagger-output.json의 URL
          layout: "StandaloneLayout"
      }
  })
);

 

 

그러자, 빌드 파일이 담길 폴더에 아래와 같이 swagger ui 관련하여 다 모든 게 추가되었다.

저게 보이자 마자 직감이 들었다...

이거 됐다....!!

 

두근거리는 마음으로 배포한 서버의 스웨거로 접속

 

 

잘 뜬다...!!⭐⭐⭐

🥔🥔감자꾸는 자유예여^^

진짜 스웨거 버릴까 싶은 마음만 수백번 수천번...

 

위와 같이...나와 같은 오류를 겪는 스웨거인들에게...이 글 보고 광명 찾으세요..

 

근데 왜 갑자기 ui가 제대로 안뜬거지? 정말 모르겠어요..