두개로 나뉘어져 있던 Nginx 서버를 하나로 합치게 되면서 발생한 문제들이 있었다.
먼저 (1) main 웹 페이지와 (2) admin 웹 페이지 두개의 정적 파일을 배포하는데 설정은 다음과 같았다.
server {
listen 80;
localtion / {
proxy_pass docker-main-web
...
}
location /admin_address {
proxy_pass docker-admin-web
}
}이때 admin_address에서 배포하는 정적 페이지는 next.js를 기반으로 하고 있었다.
1. next.js의 static page가 /admin_address의 경로가 아니라 /경로를 기준으로 생성되었다.
- 이를 해결하기 위해 next.config.js를 수정하여 /admin_address 경로로 정적 페이지가 라우팅 되도록 하였다.
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
basePath: '/admin_address',
assetPrefix: '/admin_address',
publicRuntimeConfig: {
staticFolder: '/admin_address',
},
};
module.exports = nextConfig;1-1. basePath를 바꾸면 Next.js가 모든 요청에 대해 /admin_address를 포함하게 된다.
1-2. assetPrefix로 인해 이미지에 대해서도 /admin_address를 포함한 경로를 제공하게 된다.
1-3. publicRuntimeConfig을 지정해주어 /public 을 기본 경로로 사용하지 않고 /admin_address/…이 기본 경로로 사용되도록 바꾸어준다. publicRuntimeConfig은 다음과 같이 사용한다.
import getConfig from 'next/config';
...
<Image
src={`${publicRuntimeConfig.staticFolder}/.../[image].png`}
alt={''}
width={1360}
height={640}
/>
2. favicon이 나타나지 않는 문제점의 경우 _document.tsx를 다음과 같이 바꾸어서 해결 하였다.
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang="ko">
<Head />
<link rel="icon" href="/admin_address/favicon.ico" />
<body>
<Main />
<NextScript />
<div id="notifications"></div>
</body>
</Html>
);
}'Trouble shooting' 카테고리의 다른 글
| [Jest] TypeError: Cannot read properties of undefined (reading 'name') 오류 (0) | 2023.02.02 |
|---|---|
| React와 Node로 Github OAuth구현 (Typescript, Proxy server) (0) | 2023.01.22 |
