0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@dorcus-rectus

Amazon SageMaker AI CodeEditorでReactアプリをプレビューする方法

0
Last updated at Posted at 2026-02-14

Amazon SageMaker AI CodeEditor上でReact（Vite）プロジェクトを作成し、ブラウザでプレビューする手順を紹介します。

前提条件

  • Amazon SageMaker AI のCodeEditorが利用可能であること
  • Node.js がインストール済みであること

1. Reactプロジェクトの作成

CodeEditorのターミナルを開き、Vite + Reactのプロジェクトを作成します。

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

2. vite.config.js の設定

Viteのデフォルト設定のままCodeEditorでプレビューすると、以下のようなエラーが発生します。

アセットの404エラー（base 未設定の場合）:

ブラウザのコンソールにアセットの読み込み失敗が表示されます。

Failed to load resource: the server responded with a status of 404 (Not Found)
main.jsx:1
Failed to load resource: the server responded with a status of 404 (Not Found)
@react-refresh:1

ホストのブロックエラー（vite dev 使用時）:

開発サーバー（vite dev）を使用した場合、プロキシ経由のホスト名が許可されていないためリクエストがブロックされます。

Blocked request. This host ("xxxxx.studio.ap-northeast-1.sagemaker.aws") is not allowed.

これらの問題を解決するため、base を相対パス ./ に設定します。

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

export default defineConfig({
  plugins: [react()],
  base: './',
})

なぜ base: './' が必要なのか

Amazon SageMaker AI CodeEditorでは、ポートへのアクセスが以下のようなプロキシURLを経由します。

https://<domain>.studio.<region>.sagemaker.aws/codeeditor/default/proxy/<port>/

Viteのデフォルト設定（base: '/'）ではアセットのパスが /assets/index.js のように絶対パスで出力されます。プロキシ配下ではこの絶対パスが正しく解決できず、404エラーになります。base: './' にすることで ./assets/index.js という相対パスになり、プロキシ経由でも正しく読み込めるようになります。

3. ビルド用スクリプトの追加

package.json の scripts に dist コマンドを追加します。

"dist": "vite build && npx serve -s dist -l 5173"

このスクリプトは以下の2つの処理を順番に実行します。

  1. vite build - プロジェクトを本番用にビルドし、dist/ ディレクトリに出力
  2. npx serve -s dist -l 5173 - dist/ を静的サーバーでポート5173に配信（-s はSPA対応のフォールバック設定）

4. ビルドと起動

npm run dist

以下のような出力が表示されれば成功です。

vite v7.x.x building client environment for production...
✓ 32 modules transformed.
dist/index.html                   0.46 kB │ gzip:  0.29 kB
dist/assets/index-xxxxx.css       1.38 kB │ gzip:  0.71 kB
dist/assets/index-xxxxx.js      193.97 kB │ gzip: 60.90 kB
✓ built in 3.21s
 INFO  Accepting connections at http://localhost:5173

5. ブラウザでプレビュー

CodeEditorのポートフォワーディング機能を使ってプレビューします。

  1. CodeEditorの画面下部にあるポート一覧から 5173 を選択
  2. ブラウザの新しいタブでReactアプリが表示される

URLは以下のような形式になります。

https://<domain>.studio.<region>.sagemaker.aws/codeeditor/default/proxy/5173/

まとめ

Amazon SageMaker AI CodeEditorでReactアプリをプレビューするポイントは以下の2点です。

  • base: './' を設定し、アセットを相対パスで配信する
  • vite build + serve でビルド済みの静的ファイルを配信する

開発サーバー（vite dev）はプロキシ環境でのHMRやWebSocketの設定が複雑になるため、ビルドして静的配信する方法が最もシンプルかつ確実です。

おまけ: CodeCommitを使ったAmplifyデプロイ

CodeEditorでプレビュー確認したReactアプリを、AWS AmplifyとCodeCommitを使って公開する手順です。すべてCodeEditorのターミナルから実行します。

vite.config.js の base: './' はそのままで問題ありません。相対パスはAmplifyのホスティング環境でも正しく動作します。

1. amplify.yml の作成

プロジェクトのルートに amplify.yml を作成し、Amplifyのビルド設定を定義します。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

2. CodeCommitリポジトリの作成

aws codecommit create-repository --repository-name my-react-app --region ap-northeast-1

3. Gitの初期化とプッシュ

Gitリポジトリを初期化し、CodeCommitにプッシュします。HTTPS (GRC) を使用します。

git init
git branch -m main
git add .
git commit -m "Initial commit"
git remote add origin codecommit::ap-northeast-1://my-react-app
git push -u origin main

補足: git-remote-codecommit (GRC) はAmazon SageMaker AIの実行ロールの認証情報を自動的に使用するため、追加の認証設定は不要です。GRCがインストールされていない場合は pip install git-remote-codecommit でインストールしてください。

4. Amplify用IAMサービスロールの作成

AmplifyがCodeCommitからソースを取得し、ビルド・デプロイを実行するためのサービスロールを作成します。SageMakerの実行ロールはAmplifyの信頼関係を持たないため、専用のロールが必要です。

aws iam create-role \
  --role-name AmplifyServiceRole \
  --assume-role-policy-document '{
    "Version": "2012-10-17",
    "Statement": [{
      "Effect": "Allow",
      "Principal": {"Service": "amplify.amazonaws.com"},
      "Action": "sts:AssumeRole"
    }]
  }'

作成したロールに AdministratorAccess-Amplify マネージドポリシーをアタッチします。

aws iam attach-role-policy \
  --role-name AmplifyServiceRole \
  --policy-arn arn:aws:iam::aws:policy/AdministratorAccess-Amplify

5. Amplifyアプリの作成

AWSアカウントIDを取得し、Amplifyアプリを作成します。

ACCOUNT_ID=$(aws sts get-caller-identity --query Account --output text)

CodeCommitリポジトリを接続してAmplifyアプリを作成します。

aws amplify create-app \
  --name my-react-app \
  --repository https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/my-react-app \
  --platform WEB \
  --iam-service-role-arn arn:aws:iam::${ACCOUNT_ID}:role/AmplifyServiceRole \
  --region ap-northeast-1

出力に含まれる appId を控えておきます。

6. ブランチの接続とデプロイ

main ブランチを接続し、デプロイを開始します。<app-id> は手順5で取得した値に置き換えてください。

aws amplify create-branch \
  --app-id <app-id> \
  --branch-name main \
  --region ap-northeast-1

aws amplify start-job \
  --app-id <app-id> \
  --branch-name main \
  --job-type RELEASE \
  --region ap-northeast-1

7. デプロイの確認

ビルドの進捗を確認します。

aws amplify get-job \
  --app-id <app-id> \
  --branch-name main \
  --job-id 1 \
  --region ap-northeast-1 \
  --query 'job.summary.status' \
  --output text

ステータスが SUCCEED になればデプロイ完了です。AWSマネジメントコンソールの Amplify のページからも、ビルドログやデプロイ状況を確認できます。

以下のURLでアプリにアクセスできます。

https://main.<app-id>.amplifyapp.com

以降、CodeEditorからCodeCommitにプッシュするたびに、Amplifyが自動でビルド・デプロイを実行します。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?