LoginSignup
4

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-09-10

はじめに

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

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

構築

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

デプロイ

Vercel に登録

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

デプロイ

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

$ npm run deploy:now

> svelte-app@1.0.0 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つのトークンを追加する。

Screen Shot 2020-09-11 at 4.30.55.png

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4