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

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

ただいまの
回答率

88.03%

create-react-appで作成したアプリのデプロイの具体的な方法

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 849

score 138

create-react-appでウェブサービスを作成してnpm run buildで出力されたファイル群をサーバーに
アップロードする「デプロイ」についてなんですが、

npm run buildを実行すると、buildディレクトリ内に

build
(1)|-static
(2)|-asset-manifest.json
(3)|-favicon.ico
(4)|-index.html
(5)|-logo192.png
(6)|-logo512.png
(7)|-manifest.json
(8)|-precache-manifest.0ce....js
(9)|-robots.txt
(10)|-service-worker.js

上記10個のファイル・ディレクトリが存在します。
以前一度xserverの公開ディレクトリ(public_html)に上記10個のファイル・ディレクトリをアップロードして(https://yyyyyy.com/index.html)(私のドメインがyyyyyy.comとして)にアクセスしたらデフォルトのreactアプリが表示されたので、これでデプロイできている、ということだと思うのですが、この方法だと公開ディレクトリがどんどん散らかっていくので不自然な気がします。
buildディレクトリごと公開ディレクトリにアップロードした方が公開ディレクトリがすっきりすると思うのですが、実際buildディレクトリごとアップロードして
http://yyyyyy.com/build/index.html
にアクセスすると画面が真っ白で何も表示されません。

正しいデプロイの方法はやはり10個のファイル・ディレクトリを全て公開ディレクトリにアップロードする方法、という認識で間違いないでしょうか?

あと初心者でもわかるように具体的なデプロイ方法を示している公式ページ・ブログなどありましたら教えてください。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

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

  • ただいまの回答率 88.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る