Bolt.newで作成したプロジェクトをAzureにデプロイする方法（GitHubおよびAzureDevOps未使用）
はじめに
MS開発部の松坂です。
本記事では、Bolt.newで作成したプロジェクトをAzure Web Appにデプロイする方法を解説します。また、Bolt.newで出力されるプロジェクトはReactであり、本来ReactをAzureにデプロイする際はGitHubやAzureDevOpsを使用します。場合によってはそれらを用意できない環境もあるかと思いますので、その際はこの記事を参考にお試しください。
Bolt.newとは
Bolt.newは、AIを活用した次世代型の開発支援ツールで、初心者からプロまで幅広いユーザーが利用可能です。自然言語で指示を入力するだけでコードを自動生成し、フロントエンドからバックエンドまで一貫して開発できます。クラウドベースでどこからでも操作可能なうえ、AIがエラーチェックやデプロイを効率化。直感的なインターフェースと多言語対応により、誰でも簡単かつ迅速にアプリケーションを構築できるのが特徴です。1. 開発環境の準備
まずは、開発環境を整えます。これには、Visual Studio Code（VSCode）のインストールと、必要なパッケージのインストールが含まれます。
1-1. Visual Studio Codeのインストール
Visual Studio Codeは、Node.jsアプリケーションの開発に広く使われているエディタです。以下の手順でインストールします。
- Visual Studio Codeの公式サイトにアクセス。
- 自分のOSに合わせたインストーラーをダウンロードし、インストールを実行します。
1-2. Visual Studio Codeのプラグインをインストール
VSCodeをインストールしたら、次のプラグインを追加します。
- Azure App Service: Azureへのデプロイを支援するプラグイン。
VSCodeを起動し、左の拡張機能アイコン（四角いアイコン）をクリックして、検索欄にプラグイン名を入力しインストールします。
1-3. Node.jsとnpmのインストール
Node.jsは、Expressやnpm（Node Package Manager）を使うために必要です。以下の手順でインストールします。
- Node.jsの公式サイトにアクセスし、「LTS（長期サポート）」版をダウンロードします。
- ダウンロードしたインストーラーを実行し、インストールを完了させます。
インストール後、コマンドプロンプトで以下のコマンドを実行して、インストールが正常に完了したか確認します。
正常にインストールされていれば、それぞれNode.jsとnpmのバージョンが表示されます。
1-4. npmのプラグインをインストール
npmをインストールしたら以下コマンドを実行|
1 2 |
npm install create-vite npm install express |
2. AzureでWeb Appを作成する
Azureにデプロイするために、まずAzureポータルでWeb Appを作成します。
2-1. Azureポータルにサインイン
- Azureポータルにアクセスし、アカウントでサインインします。
- まだアカウントを作成していない場合は、新しくアカウントを作成してください。
2-2. App Servicesの作成
-
**「リソースの作成」**をクリックし、「App Services」を検索して選択します。
- App Services一覧画面が表示されるので、画面左上の「作成」→「Web アプリ」を選択します。
-
App Servicesの作成フォームが表示されるので、次の情報を入力します：
- サブスクリプション：使用するサブスクリプションを選択
- リソースグループ：新規作成または任意のリソースグループ（例：
my-webapp-group） - Web App名：ユニークな名前を指定
- 公開：コード
- ランタイムスタック：Node 20 LTS（NodeでオペレーションシステムがWindows選択できるものであれば）
- オペレーションシステム：Windows
- リージョン：任意のデータセンターの場所を選択
- App Serviceプラン：無料プラン（
F1）および任意のプランを選択
-
入力後、「確認及び作成」を押下し、確認ページで「作成」をクリックします。
3. Bolt.newにアクセスしてユーザー登録
次に、Bolt.newにアクセスしてプロジェクトを作成します。
- Bolt.newの公式サイトにアクセスします。
- ユーザー登録を行い、作成したいサイトのプロンプトを実行します。
4. Bolt.newで作成したプロジェクトをダウンロード
Bolt.newで作成したプロジェクトのZIPファイルをダウンロードします。
画面右上の「Export」→「Download」をクリックしてZIPファイルをローカルに保存します。
5. Expressアプリの作成
Expressは、Node.js用の軽量なWebフレームワークです。express-generatorを使ってアプリケーションのテンプレートを作成します。
5-1. Expressアプリの生成
コマンドプロンプトを開き、プロジェクトを展開する任意の場所に移動します。
移動した後次のコマンドを実行します。
これにより、基本的なExpressアプリケーションのフォルダ構造が生成されます。
6. npm run buildを実行して、Expressにファイルを移動
Bolt.newで作成したプロジェクトをビルドし、Expressアプリケーションに統合します。
6-1. npm run buildの実行
次に、プロジェクトのビルドを行います。Bolt.newからダウンロードしたプロジェクトを展開します。今回はわかりやすくするため、プロジェクトフォルダに新たにClientフォルダを作成してそこに配置します。
コマンドプロンプトでClientフォルダに移動し、以下のコマンドを実行します。
ビルドが完了したら、Bolt.newのプロジェクト配下にdistフォルダが作成されます。作成されたフォルダの中には静的ファイル（HTML、CSS、JSファイル）が含まれていることを確認します
。
これら全てをExpressプロジェクトのアプリケーションのpublicフォルダ（server/public）に貼り付けてください。
7. Visual Studio CodeでAzureにデプロイ
最後に、VSCodeからAzureにデプロイします。
7-1. Azureアカウントとのリンク
VSCodeの左側にある「Azure」アイコンをクリックし、Azureアカウントにサインインします。
7-2. Web Appへのデプロイ
- VisualStudioCodeの上メニューより「File」→「OpenFolder…」を選択します
- Expressプロジェクトを選択します
- VisualStudioCodeの左メニューよりAzureアイコンをクリックし、デプロイするApp Servicesを右クリックします。
- 右クリックメニューより「Deploy to Web App…」を選択し、他表示されるウィンドウも同様に「Deploy」を選択していってください。
デプロイ後、AzureポータルでデプロイしたApp Servicesを開き、基底のドメインをクリックしてアクセスしてください。
Bolt.newで作成したプロジェクトが表示できれば無事完了です。
おわりに
Bolt.newで作成したプロジェクトをAzureにデプロイする方法を紹介しました。これにより、オンラインでプロジェクトを公開し、誰でもアクセスできるようになります。デプロイ時に発生する可能性のあるエラーについては、Azureの診断ツールやログを活用して対応しましょう。
Azure Web Appを利用することで、スケーラビリティや管理の負担を減らすことができます。
関連リンク
以上、最後までご愛読いただき
ありがとうございました。
お問い合わせは、
以下のフォームへご連絡ください。
関連記事
松坂
この著者の保持資格
松坂