Zenn
🤙

【Let's ハンズオン🤙】Next.jsをAzure Static Web Appsを使ってWEBサイトをデプロイ

2022/08/27に公開
Azure
Next.js
React
Azure Static Web Apps
tech

【Let's ハンズオン 🤙】 Next.js を Azure の Static Web Apps を使って WEB サイトを Deploy していくやで

目次

  1. Next.js のプロジェクトを準備
  2. Azure Portal から Static Web Apps を準備
  3. Github と連携させて、Deploy 自動化
  4. 最後に

Next.js のプロジェクトを準備

まずは github のプロジェクトを作成しまししょう！
githubへアクセスして、New をクリックです！
github

そしてリポジトリを create しましょう！
create_repo

こんな感じの画面が表示されれば OK です！
fin_create_repo

リポジトリをローカルへ clone しましょう。
ターミナルを起動して、以下のコマンドを実行です。

git clone [githubのURL]

ローカルにプロジェクトが作成されましたか？
その後は作成されたディレクトリへ移動です。

cd [作成されたディレクトリ]

そこで、Next.js のプロジェクトを作成するために以下のコマンドを打ちましょう！

npx create-next-app@latest . --ts

Success!と出れば OK です！

ちょっとだけ、コードを変更。

pages/index.tsx の Image を img に変更してあげてください。

※これをしとかないと、後々 Deploy で失敗します...

では、ちょっと動作確認してみましょう。
以下のコマンドでアプリを起動してみてください！

npm run dev

http://localhost:3000/

にアクセスして以下の画面が表示されれば OK です！

fin_create_repo

ここまでできたら、github へ push しちゃいましょう！

できましたか？

fin_create_repo

Azure Portal から Static Web Apps を準備

次は Azure ポータルから AzureStaticWebApps を作成しましょう！

Azureportal のログイン画面はこんな感じ。

Azure_portal

全てのサービ → 静的 Web サービスを選択してください！

そして静的 Web サービスを作成しましょう！

staticwebapps

そして静的 Web サービスの初期設定はこんな感じ。

settings

settings

settings

設定ができたら作成をクリック！

settings

こんな感じの画面がでたら OK です！

ここからは Github と連携させて Deploy していくための設定をしていきます。

Github と連携させて、Deploy 自動化

それでは、先ほど作成した Github の画面に戻ってください。

settings

Actions を見ると、Deploy がエラーとなっているはずです。

こんなことでは落ち込みません。
想定内です。

では、ターミナルから以下のコマンドを実行してください。

git pull

こんな yml ファイルが生成されましたか？

yml

ここに Next.js の Deploy の設定を記載していきます

jobs のところをこんな感じで書き換えてみてください。

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 16.x

      - name: Install NPM packages
        run: npm i

      - name: Build Next.js app
        run: npm run build && npm run export

      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1

そして、package.json の scripts の箇所へ next export を追記してください。

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

書き換えれたら、再度、yml ファイルと package.json を github へ push です！

その後、github へアクセスし、Action のところから deploy がうまくいくことを見守っててください。

github の Actions でこんな感じで表示されたら拍手です 👏

yml

Azure ポータルへ移動しましょう。
url をクリックして...
portal

この画面が出てきたら OK です！

deploy

後はソースコード更新 →github へ push すると自動的にデプロイしてくれます！

お疲れ様でした！

GitHubで編集を提案

Discussion