Webアプリのプレビュー機能とは？？

ワークショップ環境は、EC2上にVS Code Serverを起動しブラウザからアクセスする仕組みです。

このVS Code ServerでWebアプリの開発を行っている場合、Webアプリの実際の動作画面確認したくを見たくなりますよね？

ワークショップ環境にはNginxがリバースプロキシとしてインストールされており、特定のURLパスへのアクセスをVS Code Serverで使用している8080ポートとは別のポートにルーティングする設定が行われています。

任意のWebアプリが使用するパス「/app」とポート「8081」はCloudFormationのデプロイ時のパラメーターで変更可能です。

やってみよう

実際にやってみます。

Viteで簡単なWebアプリを作成します。

npm -y create vite@latest my-app -- --template react

cd my-app
npm install

「vite.config.js」にパスとポートの指定を追加します。

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

  // https://vite.dev/config/
  export default defineConfig({
    plugins: [react()],
+    base: '/app',
+    server: {
+      port: 8081
+    }
  })

サーバーを起動します。

npm run dev

  VITE v6.0.1  ready in 179 ms

  ➜  Local:   http://localhost:8081/app
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

appパスに8081ポートで起動していることが確認できます。

このWebアプリにアクセスするには、Cloud「https://{CloudFront発行ドメイン}/app」でアクセスできます。

これでWebアプリの開発にもこの環境が使えますね！

Streamlitを使いたい場合

Amazon Bedrock 生成AIアプリ開発入門でも利用しているStreamlitですが、ここまで解説した方法ではうまくいきません。。

pip install streamlit
streamlit hello --server.port 8081 --server.baseUrlPath app

読込中っぽい画面から進みません😭

原因ですが、StreamlitがWebSocketを使用しているのですが、Nginxのプロキシー部分がWebSocketに対応していないためです。

対応方法は、Nginxの設定ファイルに1行追加するだけです。

sudo nano /etc/nginx/sites-available/code-server

/etc/nginx/sites-available/code-server

server {
    listen 80;
    listen [::]:80;
    server_name d1rlhkzbdhtb2q.cloudfront.net;
    location / {
      proxy_pass http://localhost:8080/;
      proxy_set_header Host $host;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection upgrade;
      proxy_set_header Accept-Encoding gzip;
    }
    location /app {
      proxy_pass http://localhost:8081/app;
      proxy_set_header Host $host;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection upgrade;
      proxy_set_header Accept-Encoding gzip;
+     proxy_http_version 1.1;
    }
}

変更後、Nginxを再起動します。

sudo systemctl restart nginx.service

再度、Streamlitを立ち上げてアクセスすると、無事動作しました。

これでAmazon Bedrock 生成AIアプリ開発入門のハンズオンにも利用できますね！

おまけ

CloudFormationテンプレートに、上記修正を反映した版を用意しましたので、よければご利用ください。

CloudFormationテンプレート