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

[Remicck]

不具合概要

f7b3211

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

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

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

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

発生環境

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

[Remicck]

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

[shisyamo]

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

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

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

[Remicck]

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

[Remicck]

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

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

取り急ぎです。

[Remicck]

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

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

[shisyamo]

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

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

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

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

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

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

[re-rebecca]

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

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

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

[shisyamo]

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

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

[re-rebecca]

@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]

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

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

[re-rebecca]

@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]

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

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

[shisyamo]

@re-rebecca @Remicck

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

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

[Remicck]

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

[re-rebecca]

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

[shisyamo]

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

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

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

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

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

[Remicck]

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

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

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

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

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

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

[re-rebecca]

@shisyamo

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

　#5 (comment)
　#5 (comment)

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

@Remicck

　#5 (comment)

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

[shisyamo]

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

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

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

[shisyamo]

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

[re-rebecca]

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

[shisyamo]

@Remicck @re-rebecca

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

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

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

[re-rebecca]

@shisyamo
@Remicck

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

[shisyamo]

@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]

方針としては 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]

.envに関しては

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

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

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

[Remicck]

一部ファイルを修正しました。
以下の手順で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