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

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

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

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

Q&A

0回答

773閲覧

React&TypeScript アプリをHerokuにデプロイしたい

gasuketu

総合スコア10

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

0グッド

0クリップ

投稿2021/02/11 02:06

編集2021/02/11 02:08

React TypeScriptで作ったアプリケーションをherokuにデプロイする際に404エラーが発生。
<ファイル構造>
dist
ーindex.html
ー main.js
node_modules
src
ーmain.tsx
ーApp.tsx
package.lock.json
package.json
tsconfig.json
webpack.config.js
server.js

package.json

1//package.json 2{ 3 "name": "reacttype", 4 "version": "1.0.0", 5 "description": "", 6 "main": "main.js", 7 "scripts": { 8 "test": "echo \"Error: no test specified\" && exit 1", 9 "build": "webpack", 10 "watch": "webpack -w", 11 "start": "node server.js" 12 }, 13 "keywords": [], 14 "author": "", 15 "license": "ISC", 16 "devDependencies": { 17 "css-loader": "^5.0.1", 18 "style-loader": "^2.0.0", 19 "ts-loader": "^8.0.14", 20 "typescript": "^4.1.3", 21 "webpack": "^5.20.1", 22 "webpack-cli": "^4.5.0" 23 }, 24 "dependencies": { 25 "@fortawesome/fontawesome-svg-core": "^1.2.34", 26 "@fortawesome/free-regular-svg-icons": "^5.15.2", 27 "@fortawesome/free-solid-svg-icons": "^5.15.2", 28 "@fortawesome/react-fontawesome": "^0.1.14", 29 "@types/react": "^17.0.1", 30 "@types/react-dom": "^17.0.0", 31 "@types/react-router-dom": "^5.1.7", 32 "axios": "^0.21.1", 33 "express": "^4.17.1", 34 "path": "^0.12.7", 35 "react": "^17.0.1", 36 "react-dom": "^17.0.1", 37 "react-router-dom": "^5.2.0", 38 "react-transition-group": "^4.4.1", 39 "styled-components": "^5.2.1" 40 } 41}
//server.js var path = require('path'); var express = require('express'); const publicPath = path.join(__dirname,'dist'); const PORT = process.env.PORT || 3001; var app = express(); app.use(express.static(path.join(publicPath))); app.get('*',(req,res)=>{ res.sendFile(path.join(publicPath,'index.html')); }) app.listen(PORT, function() { console.log('listening'); });

githubとherokuを連携させてデプロイしております。デプロイまでは成功しますがアクセスするとサーバーエラー(404)が出ます。
ローカルサーバーではうまく動きますがHeroku上では動きません。(ローカルサーバーでは/index.html,/main.jsにもアクセスできます)

尚、Herokuの設定についてはdefaultからいじっておりません。

ご教授いただければと思います。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問