Vite로 만든 프로젝트 배포하기 (github page, docker)

Github Page

형상관리를 git으로하고 github를 사용한다면 static한 파일을 배포해서 username.github.io/reponame으로 생성됩니다.

서버를 구매하지 않아도 코딩의 결과물을 무료로 배포 할 수 있습니다!

Vite config

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  base: "/reponame/",
  plugins: [react()],
});
Code language: JavaScript (javascript)

Github action

https://github.com/sitek94/vite-deploy-demo

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 16

      - name: Install dependencies
        uses: bahmutov/npm-install@v1

      - name: Build project
        run: npm run build

      - name: Upload production-ready build files
        uses: actions/upload-artifact@v2
        with:
          name: production-files
          path: ./dist

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      - name: Download artifact
        uses: actions/download-artifact@v2
        with:
          name: production-files
          path: ./dist

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./distCode language: YAML (yaml)

Docker

나는 github page가 아닌 내가 호스팅하고있는 서버에서 하고싶다.

package.json

serve라는 스크립트를 만들고 vite의 preview의 옵션들을 추가한다.

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview --port 8000 --host"
  },Code language: JSON / JSON with Comments (json)

docker-compose

version: '3.7'

services:
  app:
    image: node:lts
    working_dir: /var/www/html/app/
    command: yarn preview --port 8000 --host
    volumes:
      - ./apps/main:/var/www/html/app
    ports:
      - 8000:8000Code language: YAML (yaml)

using traefik

version: '3.7'

services:
  app:
    image: node:lts
    networks:
      - traefik_proxy
      - default
    working_dir: /var/www/html/app/
    command: yarn preview --port 8000 --host
    volumes:
      - ./apps/main:/var/www/html/app
    labels:
      - traefik.enable=true
      - traefik.http.routers.${SERVICE}.entrypoints=https
      - traefik.http.routers.${SERVICE}.rule=Host(`${DOAMIN}`)
      - traefik.http.routers.${SERVICE}.tls.certresolver=leresolver
      - traefik.http.services.${SERVICE}.loadbalancer.server.port=8000
      - traefik.http.routers.${SERVICE}.middlewares=beeclover-global-script@file
      #- traefik.http.routers.${SERVICE}.middlewares=beeclover-global-script@file,basic-auth@file

networks:
  traefik_proxy:
    external: trueCode language: YAML (yaml)