飽き性の頭の中
Remix x Panda CSSののアプリをCloudflare PagesにGitHub Actionsでデプロイするのサムネイル

Remix x Panda CSSののアプリをCloudflare PagesにGitHub Actionsでデプロイする

2024-02-10に公開

Remix で Panda CSS での開発のキャッチアップのために少しいじっていたときのメモ。

せっかくなので、デプロイ先も流行りの Cloudflare Pages にしてみたが、GitHub Actions でのデプロイの設定が少し手間だったのでその時のメモ。

GitHub Actions の workflow

説明は省くが、以下のような workflow を作成した。

.github/workflows/deploy.yml
name: Deploy to Cloudflare Pages

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Build and Deploy
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18.x"

      - name: Install Dependencies
        run: yarn install

      - name: Prepare for Build
        run: yarn prepare

      - name: Build Project
        run: yarn build

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy ./public --project-name=your-project-name

以下参考にさせていただいた記事/ページ。

https://zenn.dev/nwtgck/articles/1fdee0e84e5808
https://zenn.dev/nwtgck/articles/1fdee0e84e5808

関連記事

タグ

#福岡:39

#東京:20

#大学院:15

#移住:10

#Firebase:9

#Google:9

#Sony:9

#エナジードリンク:9

#ブロックチェーン:9

#Apple:7

#Mac:7

#Next.js:7

#Webエンジニア:7

#a7iii:7

#インドネシア:6

#サントリー:6

#英語:6

#Googleフォト:5

#TypeScript:5

#埼玉:5

#AWS:4

#Anker:4

#Canon:4

#EOS 8000D:4

#Gatsby.js:4

#Kindle:4

#React:4

#ZONe:4

#iPad mini:4

#コワーキングスペース:4

#セブンイレブン:4

#ラーメン:4

#京都:4

#仮想通貨:4

#修士論文:4

#内省:4

#民主主義:4

#社会人:4

#鴨川シーワールド:4

#Docker:3

#EOS8000D:3

#Firebase Hosting:3

#GitHub Actions:3

#Google Drive:3

#Lightroom:3

#Markdown:3

#Pixel:3

#React Native:3

#Soundcore:3

#d.school:3

#iPad:3

#iPhone:3

#アマルティア・セン:3

#アメリカ:3

#ジャカルタ:3

#スピーカー:3

#デザイン思考:3

#ブログ:3

#レッドブル:3

#ワークショップ:3

#卒業旅行:3

#寿司:3

#旅行:3

#研究:3

#紅葉:3

#長崎:3

#65mm F2 DG DN Contemporary:2

#API:2

#ChatGPT:2

#Creative:2

#ECR:2

#ERC20:2

#Expo.io:2

#Firestore:2

#GPT4:2

#GitHub:2

#Kindle Oasis:2

#Kindle Paperwhite:2

#Kubernetes:2

#LINE:2

#Mac mini:2

#MacBook Pro:2

#NestJS:2

#Notion:2

#Oculus:2

#Oculus Quest:2

#Panda CSS:2

#Pixel Buds:2

#Remix:2

#Sigma:2

#Storybook:2

#VS Code:2

#Zotero:2

#pandoc:2

#re:Invent:2

#かき小屋:2

#くら寿司:2

#カフェ:2

#ギグワーカー:2

#サーチコンソール:2

#シェアオフィス:2

#スターバックス:2

#ステーキ:2

#スマートウォッチ:2

#ソラマチ:2

#チョコレート:2

#デモクラシー:2

#ニューヨーク:2

#バリ島:2

#パンとエスプレッソと:2

#ヒュッゲ:2

#ビーチ:2

#ブックスタンド:2

#マクドナルド:2

#ミズマチ:2

#モンスターエナジー:2

#リモートワーク:2

#ワイヤレスイヤホン:2

#三千院:2

#両国:2

#兵庫:2

#千葉:2

#博多:2

#堀江貴文:2

#宗教:2

#宮崎:2

#就活:2

#嵐山:2

#川越:2

#広島:2

#引用:2

#新宿御苑:2

#日米学生会議:2

#早稲田:2

#有馬温泉:2

#東寺:2

#東浩紀:2

#機械学習:2

#歯医者:2

#歴史:2

#江ノ島:2

#浅草:2

#清澄白河:2

#温泉:2

#独自ドメイン:2

#神奈川:2

#神戸:2

#英検:2

#転職:2

このブログの運営者

Profile picture

たわ / tawachan

1994年生まれ(29歳)

大学院修士課程(政治学)(2021-2023)

Web開発(2017-)

©2024 tawachan All Rights Reserved.