DaggerのサンプルをNetlifyにデプロイしてみた

Daggerとは

最新のCI/CDツール。
Docker上で動くため、Docker環境は事前に用意しておく必要がある。
パイプラインの記述がyamlではなくcuelangを使用している。

メリット

・開発環境とCI環境の統一ができる
・yamlの書き直しが減る

など、ほかにもあるかも

Daggerのインストール

こちらを見てください

Daggerのサンプル

こちらを使用しました。
forkするなり、そっくりそのまま自分で作るなど。

サンプルをローカル実行

準備

プロジェクトにdaggerが入っていない時

dagger project init

プロジェクトにdaggerが入っている時

dagger project update

デバッグする時に詳しくログを出すためのexport

export DAGGER_LOG_FORMAT="plain"
export DAGGER_LOG_LEVEL="debug"

実行

dagger do build

以下、実行後の構成

ローカルからNetlifyにデプロイする

Netlifyの登録についてはこちらを参考にしてください

また、アクセストークンも取得しておいてください

export USER=Netlifyのユーザー名
export NETLIFY_TOKEN=Netlifyのアクセストークン

dagger do deploy

その後、Netlifyの管理画面に移動すればデプロイされているサイトがあります！

GitHub Actionsのyamlの記述

.github/workflows/todoapp.yml

name: todoapp

on:
  push:
    # Trigger this workflow only on commits pushed to the main branch
    branches:
      - main

# Dagger plan gets configured via client environment variables
# This needs to be unique across all of netlify.app
# APP_NAME: todoapp-dagger-europa

jobs:
  dagger:
    runs-on: ubuntu-latest
    steps:
      - name: Clone repository
        uses: actions/checkout@v2

      # You need to run `dagger project init` locally before and commit the cue.mod directory to the repository with its contents
      - name: Deploy to Netlify
        uses: dagger/dagger-for-github@v3
        # See all options at https://github.com/dagger/dagger-for-github
        with:
          version: 0.2
          workdir: todoapp
          # To pin external dependencies, you can use `project update github.com/[package-source]@v[n]`
          cmds: |
            project update
            do deploy
        env:
          # Get one from https://app.netlify.com/user/applications/personal
          USER: ${{ secrets.USER }}
          NETLIFY_TOKEN: ${{ secrets.NETLIFY_TOKEN }}

NETLIFY_TOKENとUSERはGithub settings の Secretに入れておく事

Next.jsの自作アプリをデプロイしたい場合の追加事項

yarn.cueでデプロイするディレクトリ名がデフォルトでbuildになっている為

	// Path of the yarn script's output directory
	// May be absolute, or relative to the workdir
	outputDir: string | *"./build"

1. packege.jsonの変更で行う場合

package.json内にあるscriptsのbuildの項目に、
next export -o buildを追加しておくことで生成ファイルの名前をbuildに固定する

package.json

"scripts": {
  "dev": "next dev",
  "build": "next build && next export -o build",
  "start": "next start",
  "lint": "next lint"
}

2. [アプリ名].cueの変更で行う場合

// Build live-front
build: yarn.#Script & {
  name:   "build"
  source: actions.source.output
  outputDir: "out" //ここでディレクトリの指定をする
}

Dagger有りと無しでのGitHub ActionsのYamlの記述差

2022/07/14日現在での差分
月日がたっていると変更されている可能性がございます

Daggerあり

name: todoapp 

on:
  push:
    branches:
      - main

jobs:
  dagger:
    runs-on: ubuntu-latest

    steps:
      - name: Clone repository
+        uses: actions/checkout@v2
  
+      - name: Deploy to Netlify
+        uses: dagger/dagger-for-github@v3
+        with:
+          version: 0.2
+          workdir: todoapp
+          cmds: |
+            project update
+            do deploy

        env:
+          USER: ${{ secrets.USER }}
+          NETLIFY_TOKEN: ${{ secrets.NETLIFY_TOKEN }}

Daggerなし

 name: yaml_todoapp

 on:
   push:
     branches:
       - main

 jobs:
   publish:
     runs-on: ubuntu-latest

     steps:
       - name: Clone repository
-        uses: actions/checkout@master
  
-      - name: Use Node.js
-        uses: actions/setup-node@v3
  
-      - name: Install dependencies
-       run: yarn && yarn run build
-        working-directory: yaml_todoapp
-        env:
-          CI: false
  
-      - name: netlify Deploy
-        uses: netlify/actions/cli@master
-        with:
-          args: deploy --dir=./yaml_todoapp/build --prod

        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}