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

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

ただいまの
回答率

90.87%

  • Laravel

    578questions

    LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

  • docker-compose

    82questions

  • Nuxt.js

    29questions

laradock + nuxt でポート 3000 へアクセス

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 112

t_k_y_d

score 2

 前提・実現したいこと

laradock で立ち上げたコンテナ上で nuxt を走らせて、ローカルのブラウザでアクセスしたい。

 環境

  • windows10 home
  • docker toolbox
  • npm v5.6.0 (workspaceコンテナ内)
  • node v10.0.0 (workspaceコンテナ内)

 発生している問題・エラーメッセージ

http:/192.168.99.100:3000


でアクセスしても応答が返ってきません。

 試したこと

基本通りに

docker-compose up -d nginx workspace mysql


のようにコンテナを立ち上げた後、
laravel のプロジェクトを作成。
workspace コンテナに入り、nuxt をインストール。

  • package.json
  • nuxt.config.js

をルートディレクトリに移して、

npm run dev


で nuxt 実行。

OPEN  http://localhost:3000


と出るので、ローカルのブラウザから、

http:/192.168.99.100:3000


でアクセスするも、「正常に接続できませんでした」エラーが出てしまいます。

docker-compose.yml の port 項目に、3000:3000 とか書いたり、

### Workspace Utilities ##################################
    workspace:
      build:
        context: ./workspace
        args:
          ~ 省略 ~
      volumes:
        - ${APP_CODE_PATH_HOST}:${APP_CODE_PATH_CONTAINER}
      extra_hosts:
        - "dockerhost:${DOCKER_HOST_IP}"
      ports:
        - "${WORKSPACE_SSH_PORT}:22"
        - "3000:3000" <- ここ
      tty: true
      environment:
        - PHP_IDE_CONFIG=${PHP_IDE_CONFIG}
      networks:
        - frontend
        - backend

Dockerfile に、

EXPOSE 3000


とか書いたりするのだろうかと思い、色々しましたが変わらず・・・

 補足情報

package.json

{
  "name": "nuxtjs",
  "version": "1.0.0",
  "description": "Nuxt.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "node_modules/nuxt/bin/nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "nuxt": "^1.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^4.15.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-vue": "^4.0.0"
  }
}

docker-machine

C:\Users\hogehoge>docker-machine ls
NAME      ACTIVE   DRIVER       STATE     URL                         SWARM   DOCKER        ERRORS
default   *        virtualbox   Running   tcp://192.168.99.100:2376           v18.03.1-ce

ちなみに、

http://192.168.99.100/


にアクセスすると、ちゃんと(?) Laravel の初期デモ画面が表示されます。

どのように 3000 へアクセスするのかご教示いただけますと幸いです。
よろしくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

0

docker-compose.yml でポート3000を開けた後、

### Workspace Utilities ##################################
    workspace:
      ports:
        - "${WORKSPACE_SSH_PORT}:22"
        - "3000:3000"

packege.json の scripts で、

"dev": "HOST=0.0.0.0 PORT=3000 node_modules/nuxt/bin/nuxt"


の様に記述する必要があった。

解決!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

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

関連した質問

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

  • Laravel

    578questions

    LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

  • docker-compose

    82questions

  • Nuxt.js

    29questions