웹 서비스를 제공하는 방식

- 생각하게 된 계기 

간단한 Vanilla JS를 활용한 웹게임을 만들어, 비개발자인 친구나 가족에게 제공해 주고 싶었다. 

 

-WAS 제공 할 수 있는 방식 몇 가지 

1. 프론트 로직만 빌드 후 HTML파일에 경로를 수동으로 추가하는 방식

 

• 폴더의 구성
  
  폴더 최상단에 index.html파일이 있고, dist폴더가 있으며,
  dist폴더 내부에 번들된 build.js파일(이름 예시)이 존재.
• 제공방식
  
  index.html에 script 태그에 build.js파일의 경로를 수동으로 기입

<script src="./dist/build.js" defer></script>

 

 

• 실행방법
  
  폴더 째로 사용자에게 넘겨서 index.html파일만 브라우저에 가져다가 놓으면 실행됨.

 

2. server와 client용 js를 구분하여 빌드 한 후 각각의 파일을 제공하는 방식

 

• 폴더의 구성
  
  server.js가 최상단에, 하위 폴더에 public이 있고 해당 폴더 내부에 client용 파일을 위치.
  
  
• build방식
  
  ; server와 client나누기 
  
  최상단의 server.js를 서버용으로 build, 
  public폴더의 js파일을 clinet용으로 build
  
  
• 제공방식
  
  • AWS (S3)
    클라이언트 : 번들 파일 AWS S3에 업로드 
    서버 : EC2에 배포 후 인스턴스에서 node서버 실행
  • Nginx
    클라이언트 번들 파일을 Nginx의 정적파일로 설정 후 제공
    서버 : (여기서는 서버를 번들링할 필요 없을 것 같다. 정적파일 제공 이외에는 서버 로직이 구성되어있지 않으므로.)

3. CRA의 방식으로 해보기 (심화)

 

• build방식

build.js

function copyPublicFolder() {
  fs.copySync(paths.appPublic, paths.appBuild, {
    dereference: true,
    filter: file => file !== paths.appHtml,
  });
}

 

webpack.config.js

plugins: [
      // Generates an `index.html` file with the <script> injected.
      new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
          },
          isEnvProduction
            ? {
            
            ...

 

 

• 👉 요약:
  public폴더의 index.html파일을 제외한 나머지를 빌드 폴더로 copy
  index.html은 js를 빌드 후 새롭게 생성
  (빌드한 파일의 명 및 이외의 static한 파일 명을 index.html에 자동으로 삽입)
  
  개발용 빌드와 프로덕션 용 빌드는 다름

 

 

 

👉 궁금해서 찾아본 것: 

 index.html을 js빌드 후 새롭게 생성하는 이유?

; build의 결과물 파일명은 달라질 수 있다. 

• 왜 달라지는가? 
  : 1) 캐싱
  사용자 경험 향상을 위해 캐싱전략을 사용할 때 
  CDN에 저장되어있는 캐싱과 구분짓기 위함 
   2) 무중단 배포시 사용됨 (파일명이 변경될 때마다 캐시 무효화)
  

 

build된 그 파일명을 수동으로 넣으면 안되나? 
누락될 수 있고 실수가 생길 수 있음
자동 배포전략을 취하는 경우 유지보수가 어렵게 됨.