Zenn
🚀

Vite + TypeScript + Reactで作成したアプリをAzure Static Web Appsで公開する

2022/10/14に公開
Azure
React
初心者
Vite
tech

Vite + TypeScript + React で作成したアプリをマイクロソフトが提供するクラウドサービスであるAzure Static Web Apps で公開する方法を示します。

ViteでTypeScript + Reactなプロジェクトを作成する

まずはViteでTypeScript + Reactなプロジェクトを作成します。Viteの公式サイトのはじめにを参考にします。

まず

$ yarn create vite

を叩き、各項目を入力・選択していきます。
まず、プロジェクトネームを入力します。

? Project name: ›

今回はfrontというプロジェクトを作成したいと思います。

? Project name: › front

次に使用するフレームワークを選択します。

? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte

今回はReactを使用するのでReactを選択します。

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte

最後にJavaScriptかTypeScriptのどちらを使用するか聞かれます。

? Select a variant: › - Use arrow-keys. Return to submit.
❯   JavaScript
    TypeScript

今回はTypeScriptを使用するのでTypeScriptを選択します。

? Select a variant: › - Use arrow-keys. Return to submit.
    JavaScript
❯   TypeScript

その後/front以下にこのようなディレクトリ構成が作成されていると思います。

.
|--.gitignore
|--index.html
|--package.json
|--public
|  |--vite.svg
|--src
|  |--App.css
|  |--App.tsx
|  |--assets
|  |  |--react.svg
|  |--index.css
|  |--main.tsx
|  |--vite-env.d.ts
|--tsconfig.json
|--tsconfig.node.json
|--vite.config.ts

ローカルで起動してみる

次にローカルでこのプロジェクトを起動してみようと思います。
まず今回作成した/frontに移動します。

cd front

次にyarnでパッケージをインストールしていきます。

yarn install

パッケージのインストールが完了したら/front以下にnode_modulesディレクトリが追加されてると思います。

.
|--node_modules     <----これ！！！
|--.gitignore
|--index.html
|--package.json
|--public
|  |--vite.svg
|--src
|  |--App.css
|  |--App.tsx
|  |--assets
|  |  |--react.svg
|  |--index.css
|  |--main.tsx
|  |--vite-env.d.ts
|--tsconfig.json
|--tsconfig.node.json
|--vite.config.ts

次にブラウザから画面を確認できるようにするためにvite.config.tsを編集します。

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: true,
+  },
})

上記編集後、bashで

yarn dev

と叩くとNetWorkと書かれている項目があります。そこにアクセスするとViteのアイコンとかが出てくると思います。
最後に今回生成したものをgithubにpushします。
以上でローカル側の作業は終了です。

Azure Static Web Appsで公開する

ここを参考にして作成していきます。

  1. まずAzureにログインします。
  2. ヘッダーのリソース、サービス、ドキュメントの検索でStatic Web Appsあるいは静的Webアプリと検索します。するとサービス欄に静的Webアプリと出てくるのでそれをクリックします。
  3. その後青い静的Webアプリの作成というボタンがあると思うのでそれをクリックします。
  4. プロジェクト詳細欄のサブスクリプション、リソースグループは今回使用するものを選択し、静的Webアプリの詳細の名前欄には今回付けたい名前を入力します。ホスティングプランは今回使用するものを選択し、Azure Functions とステージングの詳細でこのアプリのリージョンを選択します。デプロイの詳細でソースをGithubにし、組織・リポジトリ・分岐は今回公開したいものを選択します。
  5. 以上の設定を行うとデプロイの詳細の下にビルドの詳細が表示されます。ここではAzure Static Web Appsにgithubからデプロイするためのワークフローファイルを作成します。まずビルドのプリセットは今回Reactを用いているためReactを選択します。次にアプリの場所ですがこれはpackage.jsonなどが存在しているディレクトリを指定します。今回の場合は/です。APIの場所は空白で、出力先ですがこれはローカル上で
yarn build

を叩いた後、作成される/distディレクトリを示しています。そのため今回はdistを入力します。以下が今回ビルドの詳細で入力したものになります。

項目 値
ビルドのプリセット React
アプリの場所 /
APIの場所 空白
出力先 dist
  1. 青い確認および作成ボタンをクリックします。
  2. リソースが作成された後に今回githubにpushしたリモートリポジトリを確認すると、.github/workflowsというディレクトリが作成されていることがわかります。この中にあるファイルによりGithub Actionsが実行され、アプリがStatic Web Apps上にデプロイされるようになります。
  3. 最後にAzure上で今回作成したStatic Web Appsの概要に移動しURLと書かれている所をクリックするとViteのアイコンとかが出てくると思います。これにて初期設定などは完了です。今後は4.で設定した分岐が更新されると自動的にGithub Actionsが走り、Static Web Appsが更新されていきます。

終わりに

割と簡単に自分の作成したアプリを公開することができました。

参考にしたところ

Discussion