[html] 웹 앱의 컴파일 및 배포 방법

22 Dec 2023

html

웹 앱을 개발하고 작동시키기 위해서는 일련의 단계를 거쳐서 컴파일하고 배포해야 합니다. 이 문서에서는 일반적인 웹 앱의 컴파일 및 배포 프로세스에 대해 알아보겠습니다.

프로젝트 빌드

웹 앱을 개발하면서 사용하는 스타일시트, 자바스크립트 파일 등은 컴파일되야 할 수도 있습니다. 이를 위해 웹팩(Webpack), 바벨(Babel) 등의 도구를 사용하여 코드를 번들링하고 트랜스파일링할 수 있습니다.

웹팩을 사용하면 여러 파일을 하나의 번들 파일로 합치고 최적화할 수 있으며, 바벨을 사용하면 ES6+ 코드를 이전 버전의 JavaScript로 변환할 수 있습니다.

아래는 웹팩 및 바벨을 이용해 프로젝트를 빌드하는 예시입니다.

$ npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev

웹팩 설정 파일(webpack.config.js)을 작성하고, 바벨 프리셋을 사용하여 ES6+ 코드를 변환하는 설정을 합니다.

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

환경 설정

웹 앱을 테스트하고 실행하기 위해, 적합한 환경 설정이 필요합니다. 이는 원하는 웹 서버를 사용하여 로컬 환경에서 앱을 실행하거나, 별도의 개발 서버를 이용하여 테스트할 수 있습니다.

아래는 간단한 로컬 서버를 설정하여 웹 앱을 실행하는 예시입니다.

$ npm install -g serve
$ serve -s build

위 명령어를 실행하면, 현재 디렉토리 아래에 있는 build 폴더를 루트로 하는 정적 파일 서버가 실행됩니다.

배포

웹 앱이 컴파일되고 테스트되면 실제 사용자에게 제공될 환경에 배포해야 합니다. 이를 위해 웹 호스팅 서비스 또는 서버에 파일을 업로드하며, 도메인을 설정하고 DNS를 구성하여 웹 앱에 접속할 수 있게 할 수 있습니다.

이때 가장 일반적인 방법은 웹 호스팅 서비스를 사용하는 것입니다. 대표적인 웹 호스팅 서비스로는 Netlify, Vercel, Firebase Hosting 등이 있습니다.

웹 호스팅 서비스를 이용하여 파일을 업로드하고 도메인을 연결하면, 전 세계 어디에서나 웹 앱에 접속할 수 있게 됩니다.

이제 웹 앱을 개발하는데 필요한 컴파일 및 배포 프로세스에 대해 알아보았습니다.

목차

프로젝트 빌드

환경 설정

배포