영웅처럼 Jamstack 배송 - 조심하세요.

React, Angular, Vue, Gatsby 및 기타 Jamstack 프레임워크를 좋아하시나요? 만세, 나도 그래 🎉

하지만.... 우리 모두는 다음과 같은 문제를 겪었습니다.

어떻게 배포합니까? Netlify, Docker 또는 오래된 HTTP 서버를 사용합니까? 🤔

API URL을 변경해야 할 때... 다시 빌드하고 다시 배포해야 합니다 😞

작은 변경 사항을 미리 봐야 할 때... 재배포하는 데 시간이 오래 걸립니다 😞

SSL 인증서 관리가 번거롭습니다. 새 사이트를 배송할 때 자동으로 설정되어야 합니다 😡

솔루션: Meli , 잘 알려진 Caddy Server 위에 구축된 자체 호스팅 플랫폼. 기본적으로 자동 HTTP, 가동 중지 시간 없음 및 강력한 성능을 얻을 수 있습니다.

VPS에 Meli를 설치했으므로 Docker Compose로 약 2분 정도 소요되는 이 부분은 건너뛰고 지침은 체크아웃the docs합니다. 여기서부터는 Meli를 https://meli.company.com에 설치했다고 가정합니다.

Meli에 사이트 배포

매우 간단한 사이트dist/index.html부터 시작하겠습니다.

<!doctype html>
<html lang="en">
<head>
    <title>Meli example Vue.js app</title>
</head>
<body>
Hello !
</body>
</html>

Meli 인스턴스에 로그인한 후:

hello라는 사이트를 만듭니다.

사이트 ID 얻기

업로드 토큰 받기

사이트 업로드

npx @getmeli/cli upload \
   ./dist \
    --url http://localhost:80 \
    --site "8f30f74f-4b63-4dc3-b8dc-788ca43740a8" \
    --token <site-token> \
    --branch "latest"

귀하의 사이트는 이제 https://hello.meli.company.com 🚀에서 사용할 수 있습니다.

https://hello.com에서 사이트 제공

알겠습니다. 동의합니다. https://hello.meli.company.com은 별로 섹시하지 않습니다. 우리는 멋진 사이트가 https://hello.com에서 제공되기를 원합니다. 이것을하기 위해:

Meli 사이트에서 hello.com로 사용자 지정 도메인을 구성합니다.

hello.com의 DNS 영역에서 A의 IP를 가리키는 meli.company.com 레코드를 추가합니다. sub.hello.com와 같은 하위 도메인의 경우 해당 하위 도메인에 대해 구성된 단일 레코드(모든 유형 결합)인 경우에만 CNAME를 가리키는 hello.meli.domain.com 레코드를 사용할 수 있습니다.

찾아보기 https://hello.com , 그리고 출발!

CI에서 Meli에 배포

Git 리포지토리에 푸시할 때 자동으로 배포할 수도 있습니다. 예를 들어 Github 작업을 사용하면 다음과 같습니다.

name: main
on: [ push ]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: '12'
      - name: "publish"
        run: |
          npx @getmeli/cli@next upload \
            ./dist \
            --url "https://meli.domain.com" \
            --site "<your-site-id>" \
            --token "$MELI_TOKEN"
        env:
          MELI_TOKEN: ${{ secrets.MELI_TOKEN }}
          # using default GITHUB_TOKEN set by Github Actions
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

--branch는 여기에서 사용되지 않으며 Meli CLI에 의해 자동 감지됩니다.

이 설정을 사용하면 Github에서 풀 요청 미리보기를 얻을 수 있습니다.

정적 사이트의 런타임 환경 변수

Meli를 사용하면 분기별로 동적으로 생성된 콘텐츠로 사이트의 모든 경로를 재정의할 수 있습니다.

이것이 기본 Vue 앱에서 어떻게 작동하는지 봅시다. dist/index.html를 교체하고 hello에 업로드합니다.

<!doctype html>
<html lang="en">
<head>
    <title>Meli example Vue.js app</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <div v-if="loading">Loading...</div>
    <div v-if="error">{{ error }}</div>
    <div v-if="env">
        <h2>{{ env.name }}</h2>
        <pre><code>{{JSON.stringify(env, null, 2)}}</code></pre>
    </div>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      loading: true,
      error: undefined,
      env: undefined,
    },
    created: function () {
      this.loading = true;
      fetch('/env.json')
        .then(res => res.json())
        .then(env => this.env = env)
        .catch(err => this.error = err)
        .finally(() => this.loading = false);
    },
  });
</script>

</body>
</html>

/env.json 를 가져오는 중입니다. UI를 사용하여 Meli에서 이 파일을 구성합니다. 지금은 사이트를 latest 브랜치에 업로드하겠습니다.

npx @getmeli/cli upload \
   ./dist \
    --url http://localhost:80 \
    --site "8f30f74f-4b63-4dc3-b8dc-788ca43740a8" \
    --token <site-token> \
    --branch "latest"

이 분기는 https://hello.meli.domain.com에서 사용할 수 있습니다. 이제 demo라는 새 브랜치에 업로드해 보겠습니다.

npx @getmeli/cli upload \
   ./dist \
    --url http://localhost:80 \
    --site "8f30f74f-4b63-4dc3-b8dc-788ca43740a8" \
    --token <site-token> \
    --branch "demo"