質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Gunicorn

Gunicorn (Green Unicorn)は、Rubyのunicornをベースに開発されたUNIX向けのPython製HTTPサーバです。他のライブラリとの依存関係がないため、容易にインストールして使用できます。

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

2993閲覧

Flask+Reactのデプロイについて

gnuuu_07

総合スコア10

Gunicorn

Gunicorn (Green Unicorn)は、Rubyのunicornをベースに開発されたUNIX向けのPython製HTTPサーバです。他のライブラリとの依存関係がないため、容易にインストールして使用できます。

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/09/07 14:46

編集2021/09/07 16:17

実現したいこと

Flask+Reactのアプリケーションを作成しました。
現状本番環境にデプロイ済みではあるのですが、サーバー側(Flask)はgunicornで起動し、Reactはnpm startで起動するようにしています。

ただ、Reactの公式ドキュメントにもあるように,
本番の環境ではbuildしてwebサーバーからアクセスできるようにする必要があるので修正したいと考えています。

今回のような構成の場合、React側はどのようにしてbuildしたものをデプロイするのがよいのでしょうか。Flaskをgunicornで起動するのは変更せずに実現したいと考えています。
現段階では、buildして生成されたjsファイルやcssファイルなどの静的なリソースFlask側が返すような形にするのができればベストであると考えているのですが、そのようなことは可能なのでしょうか。

アプリケーションのデプロイが初めてなので教えていただきたいです。よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Reactはcreate-react-appでセットアップしていますか?
であれば、npm run buildすると build ディレクトリ配下にindex.htmlほか静的ファイルが吐き出されます。

Flask側でリソースをserveする処理は以下の記事が参考になるかと思います。
https://stackoverflow.com/questions/44209978/serving-a-front-end-created-with-create-react-app-with-flask

投稿2021/09/07 17:42

sooogle

総合スコア55

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問