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

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

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


# Next.jsのプロジェクトを準備
まずはgithubのプロジェクトを作成しまししょう！
[github](https://github.com/)へアクセスして、Newをクリックです！
![github.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/e1ea76e9-146a-964c-7534-cd17d004e09e.png)


そしてリポジトリをcreateしましょう！
![create_repo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/83d93cab-bd53-d2e6-0f46-4b6a8a9e22d3.png)


こんな感じの画面が表示されればOKです！
![fin_create_repo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/4f61cf58-453d-d94d-526a-8bf5641405b3.png)


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

```bash
git clone [githubのURL]
```

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

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

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

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

Success!と出ればOKです！

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


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

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

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

```bash
npm run dev
```

http://localhost:3000/

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


![nextjs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/70154a2c-77f3-8591-44ee-9d899365e3b4.png)


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

できましたか？

![github_push.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/321adf2b-5980-4be5-5149-66d76f28179b.png)


# Azure PortalからStatic Web Appsを準備
次はAzureポータルからAzureStaticWebAppsを作成しましょう！

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

![azure_potral.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/3621710a-07ff-5cb3-e8b7-ef2ea9dad872.png)


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

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

![staticwebapps.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/eb7ddb09-0d6b-df0f-c299-d32a7b1a6cd5.png)


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

![setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/281a3f84-d64b-c277-84eb-7266a50c745d.png)
![setting2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/5ca92ed5-c60a-b629-171b-f23423a962c7.png)
![setting3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/95ec4f32-63a6-48e3-9911-943b6b6f482d.png)


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

![deploy_fin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/ceb1770e-7580-69d5-cc67-cd4531740def.png)


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

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

# Githubと連携させて、Deploy自動化
それでは、先ほど作成したGithubの画面に戻ってください。

![github2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/916d9cf6-b66e-ebba-43c8-e99ed8f8274b.png)


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

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

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

```bash
git pull
```

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

![ymlfile.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/715b9bee-60c3-d9f1-fbe2-65e8d03204ff.png)


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

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

```yml
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を追記してください。

```json
"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でこんな感じで表示されたら拍手です👏

![deploy_success.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/a83dc140-c2b1-eda8-9832-4b424221fcd8.png)


Azureポータルへ移動しましょう。
urlをクリックして...
![deploy_portal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/19b5bb06-8eaf-6ab3-ce34-13b1bbbb91c6.png)


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

![next_deploy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/3a1a8095-ed24-0a0b-9ee2-35efea714b25.png)


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

### お疲れ様でした！