AWSさん提供のワークショップ環境で「Webアプリのプレビュー」を行う


こちらの記事でとてもたくさんいいねをいただきました🎉🎉🎉

https://qiita.com/moritalous/items/4ac5f68cc7ccabfe3788

上記記事では、とりあえず環境を構築して使ってみるところまででした。

今回は、このワークショップ環境に仕込まれている「Webアプリのプレビュー機能」を紹介します。

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

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

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

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/d15c95dc-d511-aeb0-0ff2-a520bfa9bc52.png)

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/3bb5e07e-7291-ed1f-5ef1-f6d463c1af81.png)
:::

## やってみよう

実際にやってみます。

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

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

```shell
cd my-app
npm install
```

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

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

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

サーバーを起動します。

```shell
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」でアクセスできます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/70b8b1b9-56c0-c783-1b14-e1258485f1de.png)

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


## Streamlitを使いたい場合

[Amazon Bedrock 生成AIアプリ開発入門](https://www.sbcr.jp/product/4815626440/)でも利用しているStreamlitですが、ここまで解説した方法ではうまくいきません。。

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

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

![d1rlhkzbdhtb2q.cloudfront.net_app_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/3dbbe78e-94fd-7e49-7617-f13cc9975327.png)

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

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

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

```diff_conf:/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を再起動します。

```shell
sudo systemctl restart nginx.service
```

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/0f358095-8b21-dd2b-fb00-41e0737cb565.png)


これで[Amazon Bedrock 生成AIアプリ開発入門](https://www.sbcr.jp/product/4815626440/)のハンズオンにも利用できますね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/9b6bbf6d-3398-c9c4-0d1c-c3ccb3beb6ca.png)

## おまけ

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

[CloudFormationテンプレート](https://workshop.bedrock.day/cfn/vscode-server.yaml)