on
[MS-11] i18n 외부파일 위치 변경 및 Web Dev Server 연결
[MS-11] i18n 외부파일 위치 변경 및 Web Dev Server 연결
운영환경을 만들경우 번들링 파일간의 충돌을 최소화하기 위해 i18n 파일의 위치를 변경한다.
Backend i18n은 public에 있을 필요가 없다.
Frontend i18n은 위치도 간소화 한다.
i18N 메세지 파일 위치 변경
Backend i18n 변경
apps/gateway/api/src/public/assets/i18n 의 assets 폴더를 apps/gateway/api/src 폴더 밑으로 위치 변경하고, assets/i18n/api 폴더를 assets/i18n 폴더 밑으로 이동한다.
apps/gateway/api/project.json 에 assets 경로 추가하여 번들링시 포함되도록 한다.
apps/gateway/api/src/environments/config.json 에서 i18n 위치를 변경한다.
Dashboard, Configuration, Back-Office의 API Backend에도 동일 환경을 적용한다. 특히 app.module.ts에 내역중 i18n고 TypeORM, Exception Filter 내역을 추가한다.
import { join } from 'path'; import { MiddlewareConsumer, Module, NestModule, RequestMethod } from '@nestjs/common'; import { APP_FILTER, APP_GUARD } from '@nestjs/core'; import { ServeStaticModule } from '@nestjs/serve-static'; import { TypeOrmModule } from '@nestjs/typeorm'; import { getMetadataArgsStorage } from 'typeorm'; import { GatewayApiAppService, EntitiesModule, AuthModule, AuthMiddleware } from '@rnm/domain'; import { GlobalExceptionFilter, ormConfigService, RolesGuard, TranslaterModule } from '@rnm/shared'; import { environment } from '../environments/environment'; import { DashboardModule } from './dashboard/microservice/dashboard.module'; import { ConfigurationModule } from './configuration/microservice/configuration.module'; import { BackOfficeModule } from './back-office/microservice/back-office.module'; import { AppController } from './app.controller'; import { AuthController } from './auth/auth.controller'; import { UserController } from './user/user.controller'; @Module({ imports: [ ServeStaticModule.forRoot({ rootPath: join(__dirname, 'public'), exclude: [ '/api/auth*', '/api/gateway*', '/api/dashboard*', '/api/configuration*', '/api/back-office*', '/dashboard*', '/configuration*', '/back-office*' ], }), // ORM TypeOrmModule.forRoot({ ...ormConfigService.getTypeOrmConfig(), entities: getMetadataArgsStorage().tables.map(tbl => tbl.target) }), // i18n TranslaterModule, // TypeORM EntitiesModule, // MicroService DashboardModule, ConfigurationModule, BackOfficeModule, // Auth AuthModule ], controllers: [ AuthController, AppController, UserController ], providers: [ GatewayApiAppService, // Global Exception Filter { provide: APP_FILTER, useClass: GlobalExceptionFilter, }, { provide: APP_GUARD, useClass: RolesGuard, }, ] }) export class AppModule implements NestModule { configure(consumer: MiddlewareConsumer) { if(!environment || !environment.production) { return; } consumer .apply(AuthMiddleware) .forRoutes(...[ { path: '/dashboard*', method: RequestMethod.ALL }, { path: '/configuration*', method: RequestMethod.ALL }, { path: '/back-office*', method: RequestMethod.ALL }, // { path: '/api/*', method: RequestMethod.ALL }, ]); } }
Frontend i18n 위치 변경
apps/gateway/web/src/assets/i18n/web/locale-en.json 파일의 위치를 apps/gateway/web/src/assets/i18n/locale-en.json 로 옮긴다.
apps/gateway/web/src/environments/config.json 파일을 위의 그림처럼 추가하고, i18n, auth 관련 설정을 넣는다. I18N_JSON_PATH 앞에 /dashboard 가 추가된것에 주의 한다.
// config.json { "AUTH": { "SECRET": "iot_secret_auth", "EXPIRED_ON": "1d", "REFRESH_SECRET": "iot_secret_refresh", "REFRESH_EXPIRED_ON": "7d" }, "I18N_LANG": "en", "I18N_JSON_PATH": "/dashboard/assets/i18n/" }
apps/gateway/web/src/environments/environment.ts 파일에 config.json을 import하여 export 한다.
export const environment = { production: false, }; export const config = require('./config.json');
apps/gateway/web/src/app/core/i18n.ts 파일을 libs/ui/src/lib/i18n 폴더 밑으로 옮기고, 내역을 수정한다.
import i18next from 'i18next'; import { initReactI18next } from 'react-i18next'; import XHR from 'i18next-xhr-backend'; export function initI18N(config: any) { const backendOptions = { loadPath: (config.I18N_JSON_PATH || '/assets/i18n/') + 'locale-{{lng}}.json', crossDomain: true, }; i18next .use(XHR) .use(initReactI18next) .init({ backend: backendOptions, debug: true, lng: config.I18N_LANG || 'en', fallbackLng: false, react: { wait: true } }); }
libs/ui/src/index.ts export를 추가한다.
export * from './lib/ajax/http.service'; export * from './lib/i18n/i18n';
다음으로 apps/gateway/web/src/main.tsx 에서 initI18N을 초기화 한다.
import * as ReactDOM from 'react-dom'; import { initI18N } from '@rnm/ui'; import App from './app/app'; import { config } from './environments/environment'; initI18N(config); ReactDOM.render(, document.getElementById('root'));
개발환경에서 Dashboard Web Dev Server로 연결하기
Gateway - Dashboard 로컬 개발시에는 총 4개의 프로세스가 구동되고 상호 연관성을 갖는다.
Gateway API (NodeJS & NestJS), Gateway Frontend (Web Dev Server & React) 로 Gateway하나에 두개의 프로세스가 구동된다.
Dashboard API, Dashboard Frontend 도 두개의 프로세스가 구동된다.
4개 프로세스간의 관계
개발시에 전체 루틴을 처리하고 싶다면 위와 같은 Proxy 설정이 되어야 한다. 환경 설정을 다음 순서로 진행한다.
Step-1) Gateway Web에서 Gateway API로 Proxy
apps/gateway/web/proxy.conf.json 환경은 Dashboard, Configuration, Back-Office 모두를 proxy 한다. 그리고 apps/gateway/web/project.json 안에 proxy.conf.json과 포트 9000 을 설정한다.
Step-2) Gateway API에서 Dashboard Web으로 Proxy
apps/gateway/api/src/environments/config.json 에서 REVERSE_ADDRESS가 기존 Dashboard API 의 8001 이 아니라, Dashboard Web의 9001 로 포트를 변경하면 된다.
Step-3) Dashboard Web 에서 Dashboard API로 proxy
Dashboard API로 proxy 하기위해 apps/dashboard/web/proxy.conf.json 파일을 추가한다. api 호출은 dashboard api의 8001로 proxy 한다.
{ "/dashboard/api/*": { "target": "http://localhost:8001", "secure": false, "changeOrigin": true, "ws": true } }
apps/dashboard/web/project.json 에 설정한다.
proxyConfig
port
baseHref: "/dashboard/"를 설정한다. "/dashboard"로 하면 안된다.
Step-4) Dashboard API 변경사항
apps/dashboard/api/src/public/dashboard 하위 내역을 모드 apps/dashboard/api/src/public으로 옮기고, dashboard 폴더를 삭제한다.
apps/dashboard/api/src/environments/config.json 의 HTTP 포트는 8001 이다.
테스트
먼저 콘솔에서 gateway, dashboard web을 구동한다.
$> nx serve gateway-web NX Web Development Server is listening at http://localhost:9000/ $> nx serve dashboard-web > NX Web Development Server is listening at http://localhost:9001/
VSCode에서 gateway, dashboard api를 구동한다.
브라우져에서 http://localhost:9000 을 호출하고, 로그인 해서 dashboard web 의 index.html 이 호출되는지 체크한다.
proxy통해 dashboard web의 index.html 호출 성공
소스: https://github.com/ysyun/rnm-stack/releases/tag/ms-11
from http://mobicon.tistory.com/595 by ccl(A) rewrite - 2021-10-07 11:26:26