README.mdの手順で構築ができない

Remicck commented 4 years ago

不具合概要

https://github.com/thinkingreed-inc/oss-calendar/commit/f7b321130406b28eec7e6e4a6699ee82240fd843

早速、CentOS7上に、Docker環境をインストールし、README.mdの手順通りに

Docker-Composeを実行しコンテナを起動し、クライアントでnpm run devを実行し、ブラウザでアクセス、ログイン画面はでるのですが、ID,パス（admin/admin）を入れて進もうとすると、

[このリクエストは、サーバ側で処理できませんでした。]

と出力されてログインできない状態となっております。恐らく、クライアント側とバッグエンド側がうまく通信できていないように思われるのですが、

発生環境

環境：
ブラウザ：
バージョン：

Remicck commented 4 years ago

README.mdが分かりづらいので整理します。

shisyamo commented 4 years ago

早速の対応ありがとうございます。補足情報として、Dockerコンテナは以下が起動していることを確認しています。 osscal-nginx osscal-web osscal-mc osscak-db

何か必要な情報がありましたら、きいてください、お手数ですがよろしくお願い致します。

ちなみに、README.mdではフロント側はDockerコンテナではないですが、コンテナ化も考えております。

Remicck commented 4 years ago

こちらのコミットで修正しましたが、.env.exampleに入っているAPP_NAMEでは起動しませんでした。 0482164aa8a0e43b60c214535085f20b252c3576

Remicck commented 4 years ago

@shisyamo 現在、README.mdを修正していますが、以下の点を確認してもらえますか？

APP_URL=http://localhost # APIサーバーのアドレス、ローカルのDockerで立てている場合は通常このまま
CLIENT_URL=http://localhost:3000 # WebServerのアドレス。npm run devで建てて開発をおこなっている場合は通常3000番ポート

取り急ぎです。

Remicck commented 4 years ago

開発環境セットアップの方はREADME.mdに加筆しました。こちらでお試しください。

後ほど、npm run dev ではなく、npm run generateを使い、ビルド済みのJSを配置して公開する方法も手順にする予定です。

shisyamo commented 4 years ago

はい、.envの以下の項目は、.env.example同様に、以下のように設定しています。

APP_URL=http://localhost CLIENT_URL=http://localhost:3000

npm run dev でフロントエンドを起動させています。

git clone・・・からやり直しても状況は変わらずのようです、ログを確認してみたいと思うのですが、どこのログを見ると原因解明の手掛かりにできそうでしょうか？

すいませんが、アドバイスのほど、よろしくお願い致します。

もしかして、クライアントサーバとAPIサーバを同一サーバ上（バックエンドも）に構築しnpm run devしているのがまずいのでしょうか？

re-rebecca commented 4 years ago

@shisyamo 　ブラウザで　http://localhost/ 　を開いたらどんな画面になりますか？

もしかして、クライアントサーバとAPIサーバを同一サーバ上（バックエンドも）に構築しnpm run devしているのがまずいのでしょうか？

　私も同一Ｓｅｒｖｅｒ上で構築してますので、その点は問題ないものと思われます。

shisyamo commented 4 years ago

@re-rebecca http://localhost/ですか？

こんな感じのパーミッション系のエラーがでますね。うーん、そうですよね、同一サーバ上で問題ない・・・ですよね。

re-rebecca commented 4 years ago

@shisyamo 　まず、Docker でWWWのコンテナに入ります。

docker ps docker exec -it [container_id] bash 　[container_id] = osscalendar_nginx のIDです

　そこで

chmod 777 -R /var/www/html/storage/

　を実行してください。　　

　WWWコンテナ内でログファイルを書き出す権限がない為、　ログが吐き出せずにエラーを吐いているようです。　私の場合、もう1つエラーがあった気がしますが、それを解消すれば多分動きます。

shisyamo commented 4 years ago

@re-rebecca アドバイスありがとうございます、試してみたところ、上記キャプチャーのエラーはでなくなりました、・・・が、今度は以下のエラーが・・・。

上記同様にWWWコンテナ内の「/var/www/html/public/_nuxt/index.html」を探してみたんですけど、存在しないですよね、このエラーもre-rebeccaさん、解消されたのかな？

re-rebecca commented 4 years ago

@shisyamo 　お疲れ様でした。　そのエラーなのですが、README.mdの中の下記のコマンドで解消しませんでしょうか？

# Dockerコンテナにログインして、Composerで関連ファイルをInstallする
docker ps
docker exec -it [container_id] bash
# ここからコンテナ内
cd /var/www/html/
composer install
php artisan key:generate
php artisan optimize
php artisan migrate
php artisan db:seed
php artisan

　[container_id] = osscal-web です。

　後は Server で npm run dev で http://localhost:3000/ でしょうか。

Remicck commented 4 years ago

npm run devで起動しているのであれば、つなぎ先は http://localhost:3000 になる気がしますがそちらはどうでしょう。

localhostでつなぐと80番ポートで待ち受けしているDockerのNginxにつながりますので、npm run build等でファイル生成しないと存在しないことになると思います。

shisyamo commented 4 years ago

@re-rebecca @Remicck

ありがとうございます、上記＋APP_URL、CLIENT_URLをlocalhostから実際のIPにすることで、無事、OSSCalanderにログインすることができました。

ありがとうございました。

Remicck commented 4 years ago

@shisyamo 記述が足りなくてハマった所とか、注意点とかありましたら、README.mdに書き込んでPRもらえると助かります・・・！

re-rebecca commented 4 years ago

@Remicck 　非力ではございますが、私たちも情報共有に努めますが、　MAC OS ですと環境が限られますし、　サーバ構築例で言ってもあまりmajorとは言えないと思いますので、　Redhut系とDebian系で一度構築をしていただければ今後の参加も容易になるものと思われます。　ぜひ、ご検討ください。

shisyamo commented 4 years ago

@Remicck 了解しました、後ほど書き込めることがあれば書き込ませて頂きます。

それから、もう一つだけ、ご相談させてほしいことがあります。現状、 README.mdの手順で構築しており、

バックエンド側はDockerコンテナとして、フロントエンド側はホストOS側にインストールした両環境で動作しております。

フロントエンド側もDockerコンテナ化したいのですが、それは難しいのでしょうか？それとも、実現するのは容易なのでしょうか？

すいませんが、アドバイスのほど、よろしくお願い致します。アドバイスを頂けると有難いです。

Remicck commented 4 years ago

@re-rebecca ありがとうございます。実際にはCentOS上で稼働させている実績がありますので、そのへんもふまえてドキュメントは充実させていきたいと考えています。

@shisyamo よろしくおねがいします。 Node.js側のコンテナは実は用意していて、やろうとした痕跡だけは一応あるのですが、まだそこまで手が回っていない状態です。課題として、

初期セットアップ時のnpm install
npm run devで動かすべきか否か周りが気になっているところではあります。

順序としては、まずバックエンドのみをDockerで動かしつつ、フロントはbuildされたhtmlの配布で公開するタイプの本番環境稼働のドキュメントを整備し、その後に開発・検証用周りのDockerコンテナの振る舞い周りを整理したいという思いです。

もちろん、本番環境稼働時のBuild関係も、何かしらのオプションやスクリプトで実現できると便利だなぁと思っています。 ENVにAPP_URL周りの設定を入れておく等、このへんはDockerあるあるなプラクティスだと感じていますので。

途中段階のプロジェクトで申し訳ありませんが、ご協力いただけると大変ありがたいです。よろしくおねがいします。

re-rebecca commented 4 years ago

@shisyamo

　その後、ちゃんと動いていますでしょうか？　ログインは出来るようになると思うのですが、更新などはできていますか？

　https://github.com/thinkingreed-inc/oss-calendar/issues/5#issuecomment-603602943 　https://github.com/thinkingreed-inc/oss-calendar/issues/5#issuecomment-603630895

　そこからの手順を公開していただけませんか？

@Remicck

　https://github.com/thinkingreed-inc/oss-calendar/issues/5#issuecomment-603602943

　上記のエラーはなぜ発生していると思われますか？　　手順通りに実行していて、CentOS も Ubuntu も同様に発生している事象です。　

shisyamo commented 4 years ago

@re-rebecca はい、ログイン後、スケジュールの追加してみたり、他のユーザで参照してみたり・・・と、問題なくできていますよ。今は、フロントエンド側をDockerコンテナ化すべき悪戦苦闘しているところです。

そこからの手順ですか？うーん、read.mdに書かれてることしかしてないんですよ。 WWWコンテナのログ権限を教えて頂いたとおりにしたぐらいで・・・。

一度、暇を見つけてキレイな環境にして１からやり直してみますね。

shisyamo commented 4 years ago

@Remicck なるほど、手が回るのをお待ちしております。

re-rebecca commented 4 years ago

@shisyamo 　ゼロベースで構築いかがでしょうか？

shisyamo commented 4 years ago

@Remicck @re-rebecca

すいませんが、まだまだ、時間がかかりそうです。

もともと、OSSカレンダーだけで試し、ご協力のおかげで動作することが確認でき、他のDockerコンテナサービスと同居させなければならず、現在、悪戦苦闘中なためです、すでに他のDockerコンテナの中には、リバースプロキシとして、nginxが存在していたりしており苦戦しております。

ちなみに、当Issuer起こさせて頂きときは、OSは、CentOS7でしたが、今は、CentOS8上で構築し、OSSカレンダーのみので動作することは確認できました。

re-rebecca commented 4 years ago

@shisyamo @Remicck

Docker、Docker-Compose、npm　などの各モジュールのVersionを情報提供いただけませんか？

shisyamo commented 4 years ago

@re-rebecca

私の動作環境のバージョン情報を以下にまとめますね。

CentOS Linux release 8.1.1911 (Core) Docker version 19.03.6, build 369ce74a3c docker-compose version 1.25.4, build 8d51620a npm 6.13.4

となっています、参考まで。

Remicck commented 3 years ago

方針としては docker-compose up を行うのみで（または、migrationなどは行いつつ）環境が立ち上がるようにしたいと考えておりますが、現状作業時間を多く摂ることができずご迷惑おかけしていてすみません。

コンフィグ周りなどの問題が可能性としては高いケースが多いようですので、一度私の環境とファイルについて記載しておきます。

OS: macOS v11.1
Docker: version 20.10.2, build 2291f61
docker-compose: version 1.27.4, build 40524192
Node.js: v8.17.0
npm: 6.14.9
nvm: 0.35.3

docker-compose up -dで立ち上げ、Node.jsはローカル環境で実行（ npm run dev ） ※ npm run devで立ち上がったローカルサーバー(localhost)から、dockerのLaravel(localhost:3000)に接続する形式です。

.env

APP_NAME=OSSCalendar
APP_ENV=local
APP_KEY=base64:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX=
APP_DEBUG=true
APP_URL=http://localhost

CLIENT_URL=http://localhost:3000

nuxt.config.js

import fs from 'fs-extra'
import path from 'path'
require('dotenv').config()
const url = require('url')
const client_url = url.parse(process.env.CLIENT_URL)
const app_url = url.parse(process.env.APP_URL)
const copyHtaccessFile = 'copy/.htaccess'
const desHtaccessFile = 'public/.htaccess'

module.exports = {
  mode: 'spa',
  srcDir: 'resources/nuxt/',
  server: {
    port: client_url.port || '3000', // デフォルト: 3000
    host: '0.0.0.0' // 0.0.0.0で固定
  },
  router: {
    base: client_url.path || '/'
  },
  axios: {
    baseURL: process.env.APP_URL || 'http://localhost',
    browserBaseURL: process.env.APP_URL || 'http://localhost'
  },

Remicck commented 3 years ago

.envに関しては

APP_URL=http://localhost
CLIENT_URL=http://localhost:3000

この部分が分かりづらいと思います。コンテナで動かす場合は問題なくどちらもlocalhostになりますが、npm run devで動かすとローカルサーバーが3000番で立ち上がるのでその指定が必要です。

next.config.jsに関しては変更がないと思いますが、npm run devで動かす場合は3000番が入るようにする必要があります。

Remicck commented 2 years ago

一部ファイルを修正しました。以下の手順でWSL2 Ubuntu環境と、MacOS環境のDockerで起動を確認しています。

# DLして、コンテナをビルド、立ち上げまで行う
git clone https://github.com/thinkingreed-inc/oss-calendar.git oss-calendar
cd oss-calendar
docker-compose build
docker-compose up -d

# .envファイルを作る
cp .env.example .env

# Dockerコンテナにログインして、Composerで関連ファイルをInstallする
docker ps
docker exec -it [container_id] bash
# ここからコンテナ内
cd /var/www/html/
composer install
php artisan key:generate
php artisan optimize
php artisan migrate
php artisan db:seed
php artisan passport:install
# ここまでコンテナ内

# node.js関係
# ここはコンテナ内ではなく、ホストPC上で行っている（WSLならUbuntu上、MacOSならMacOS上）
nvm install v14.18.2
nvm use v14.18.2
npm install
npm run dev

thinkingreed-inc / oss-calendar

README.mdの手順で構築ができない #5

不具合概要

発生環境