Now(Vercel) でデプロイしてみた -> SvelteでMarkdown形式で投稿できるブログを1分で構築する

7826 ワード
Vercel routify Svelte Markdown deploy Markdown テキストリンク

はじめに

作ったものはこちらで公開しています。
https://github.com/tktcorporation/svelte-md-blog

デプロイしたブログ(Qiita と Note で間に合ってるので、何を書けば良いのかわからない)
https://blog.tktcorporation.com

構築

SvelteでMarkdown形式で投稿できるブログを1分で構築する 参照

デプロイ

Vercel に登録

Vercel へのサインアップがまだの場合、登録を済ませる。

デプロイ

最初に叩くとログインの案内が出るので、メールアドレスを入れる。
すると、Vercel からメールが届くので、そこで認証してあげる。

$ npm run deploy:now

> [email protected] deploy:now {app_root}
> cd scripts/now && npm run deploy


> @ deploy {project_root}/scripts/now
> node build && npx now

Now CLI 20.1.0
? Set up and deploy “{app_root}/scripts/now”? [Y/n] y
? Which scope do you want to deploy to? {account_name}
? Link to existing project? [y/N] n
? What’s your project’s name? {project_name}
? In which directory is your code located? ./
No framework detected. Default Project Settings:
- Build Command: `npm run vercel-build` or `npm run build`
- Output Directory: `public` if it exists, or `.`
- Development Command: None
? Want to override the settings? [y/N] n

デプロイ自動化

Github Actions

Workflow の追加

{project_root}/.github/workflows/deploy-master.yml を作成する。

# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Deploy Master

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - name: build
        run: |
          npm install
          npm run build
          cd scripts/now
          node build
      - uses: amondnet/now-deployment@v2
        id: now
        with:
          zeit-token: ${{ secrets.NOW_TOKEN }} # Required
          now-args: "--prod" #Optional
          now-org-id: ${{ secrets.NOW_ORG_ID}} #Required
          now-project-id: ${{ secrets.NOW_PROJECT_ID}} #Required
          working-directory: ./app/scripts/now
      - run: |
          echo ${{ steps.now.outputs.preview-url }}

ref: https://github.com/roxiness/routify-site-2020/blob/434c3510455f5b1e255a41e18e324b046b95cf44/.github/workflows/deploy-master.yml

Secrets の設定

Github の Repository の Secrets に3つのトークンを追加する。

NOW_TOKEN

https://vercel.com/account/tokens で新しく作成し、取得する。

NOW_ORG_ID & NOW_PROJECT_ID

{app_root}/script/now/.vercel/project.json が作成されているため、そこから値を取ってくる。

{"orgId":"xxxxxxxxxxxxxx","projectId":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}

デプロイ

master ブランチに push すると、サイトが更新される。

さいごに

超簡単でびっくり

参考

https://routify.dev/guide/starter-Template/deployment
https://qiita.com/oekazuma/items/eb086527fe59dbdacf6f