こちらの記事でとてもたくさんいいねをいただきました🎉🎉🎉
上記記事では、とりあえず環境を構築して使ってみるところまででした。
今回は、このワークショップ環境に仕込まれている「Webアプリのプレビュー機能」を紹介します。
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
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テンプレートに、上記修正を反映した版を用意しましたので、よければご利用ください。