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

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

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

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

受付中

Windowsで「http://localhost:3000」が開かない

daisuke-yoshi
daiyoshi

総合スコア4

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

2回答

0グッド

0クリップ

1084閲覧

投稿2022/07/12 15:18

前提

下記の開発環境で、script定義されてる「npm run start(gulpが走る)」を実行してもlocalhost:3000が閲覧できません。
localhost:3001やmacだと閲覧できます。
BrowsersyncのAccess URLs:も表示されます。

何が原因なのかさっぱり分からず、ヒントでも良いので探してる最中です。
ローカルのファイルを修正して上書きすれば、Browsersyncも反応します。
でもブラウザlocalhost3000で閲覧できません。

実現したいこと

windowsでもlocalhost3000で閲覧できるようにローカルの開発環境を修正したい

補足情報(FW/ツールのバージョンなど)

"engines": {
"node": "v8.11.2",
"npm": "3.10.10"
},
"dependencies": {
"@babel/runtime": "^7.17.7",
"ajv": "^6.0.0",
"axios": "^0.21.1",
"basic-auth-connect": "~1.0.0",
"bluebird": "^3.4.7",
"body-parser": "^1.17.1",
"browser-sync": "~2.18.8",
"del": "^2.2.2",
"es6-promise": "^4.2.8",
"express": "^4.14.1",
"ez.js": "^1.0.3",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-chmod": "^2.0.0",
"gulp-clean-css": "^3.0.2",
"gulp-concat": "^2.6.1",
"gulp-filter": "^5.0.0",
"gulp-hb": "^6.0.2",
"gulp-help": "^1.6.1",
"gulp-if": "^2.0.2",
"gulp-load-plugins": "^1.5.0",
"gulp-nodemon": "~2.2.1",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-shell": "^0.5.2",
"gulp-uglify": "^2.1.2",
"gulp-util": "^3.0.8",
"gulp-watch": "^4.3.11",
"handlebars-layouts": "^3.1.4",
"jquery-form-validator": "^2.3.79",
"jump.js": "^1.0.2",
"mobx": "^4.4.0",
"moment": "^2.27.0",
"node-aigis": "^1.4.1",
"object-fit-images": "^3.2.4",
"pickadate": "^3.6.3",
"pump": "^1.0.2",
"rename": "^1.0.4",
"run-sequence": "^1.2.2",
"save": "^2.4.0",
"serve-index": "^1.8.0",
"sweet-scroll": "^3.0.1",
"swiper": "^4.4.1",
"yaml-js": "^0.2.0",
"yargs": "^6.6.0"
},

以下のような質問にはグッドを送りましょう

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

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

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

hoshi-takanori

2022/07/13 01:18

何をどうやって動かしてるのか分かりませんが、express でサーバーを書いたなら、ポートの指定を変更すれば良いのでは。
technocore

2022/07/13 02:46 編集

Windowsの設定で、localhost:3000へのアクセスを許可していますか? あるいは別のアプリが3000を使用中とか。 エラーメッセージを確認してください。
miyabi-sun

2022/07/20 06:35

> script定義されてる「npm run start(gulpが走る)」を実行してもlocalhost:3000が閲覧できません。 さっぱりわからないのはこっちだよ! 実質この1行しか状況説明がないのは流石に笑う

回答2

0

誤解を招く書き方でした。
localhost:3001ではビルド後のサイトを確認できるのではなく、BrowsersyncのUIが確認できるといった状態です。
http://localhost:5000でも同様に確認できず、エラーは出てなく、ずっとブラウザがグルグルして接続できない状態です。
npmエラーも出てません。
他のエンジニアも同様に確認ができない状態で、困っております。。

投稿2022/07/14 11:21

daisuke-yoshi

総合スコア4

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

既にコメントありますが、もしwindows環境でlocalhost:3000はアクセスしても接続できず、localhost:3001だと閲覧できるのであれば、ポートがかぶっていて自動で3001に割り振られている可能性があります。
win10の場合ですが、(念のため)npm run startをしていない状況でコマンドプロンプトでnetstatを実行し、アクティブなポートを確認し、その時点で3000番がアクティブであれば他のアプリでそのポートが使われていることになります。
npm run startをした状態でnetstatを実行し、3000と3001のポートがアクティブになっていれば何かしら設定がおかしく、二つのサーバーが立ち上がっているのかもしれません。

投稿2022/07/13 04:23

YuuT

総合スコア588

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。