웹 앱 호스팅

처음으로 웹앱을 배포해보았다.

node와 js만 사용했으며,

작업 진행 순서는 다음과 같다.

 

1. 웹 앱 테스트 서버 준비(express + yarn + npm)

2. TTS 기능(Azure) 적용 

3. 영상과 TTS 음성 합성 후 녹화 기능 적용

4. 웹서버(Azure) 구축 및 배포

 

1~3번은 별 문제 없이 진행 되었으나, 4번 과정에 난항이 많았다.

 

a. Azure 배포

  상태: VS Code 확장프로그램 배포 과정 중 Zip 이후에 실패가 떴다. 이유를 찾을 수 없었다.

         프로젝트 내 모든 import, export 구조는 ES6 방식으로 사용하고 있었다. 

  해결1: 아예 프로젝트를 지우고 다시 배포했다.

  방법1: 배포 시도 중 로그가 길게 나오는 경우 확인. 덕분에 검색으로 임시파일 폴더의 용량 문제를 확인했다.

  해결2: 서버단 파일을 ES5 형식으로 바꿨다.

  방법2: 배포가 안 되는 문제는 관련이 없었다. 다만, 이후 404 에러들을 만나 ES6 문제를 확인했다.

 

b. VS Code 확장프로그램 배포 시 국적에 따라 배포가 막힘.

  상태: 퀵스타트 가이드를 따라하던 중이었다.

  해결: VS code 버전을 다운그레이드해서 해결.
  방법: 먼저 터미널만 사용해 배포해도 문제가 없었기에, VS code 문제로 생각해서 StackOverFlow 사이트에 질문을 올렸다. (https://stackoverflow.com/questions/71689331/how-fix-azure-web-app-deploy-error-with-vscode) 

c.  CORS 문제

  상태: 테스트 서버에서 잘 가져오던 JSON 파일을 Azure 배포 후 가져올 수 없었다. (policy 로그)

  해결: 데이터 파일을 메인 서버로 옮겼다.

  방법: CORS 개념부터 숙지하고 관련 튜토리얼들을 따라 진행했다. 참고1, 참고2

          하지만 재배포 시 지워질 파일이기에 일단 웹서버로 옮겼다.

 

d. 환경변수 접근(로컬)
  상태: 라우터로 환경변수(process.env) 접근이 막혔다.
  해결: dotenv 라이브러리 사용.

  방법: 구글검색.

 

e. 환경변수 접근(웹서버)
  상태: 로컬서버에서 접근했던 환경변수가 배포후에는 접근을 할 수 없었다. 에러 로그는 그냥 500 에러여서 헷갈렸다.
  해결: Azure portal 에서 변수 등록.

  방법: 앱서비스의 구성(config) 메뉴에서 애플리케이션 설정 등록. 참고자료