vueかreactを使っている企業さんが多い

フリーランスや正社員の応募要項などを見ると、javascriptはもうjQueryではなくvueかreactの2択になってきています。
ブランク時期が丁度その切り替え時期にあたっていたので、とりあえずvueから手を出してみました。

作成したサイト

No such app

tasks-4188.herokuapp.com

超シンプルなタスク管理アプリです。
タスク管理アプリはなぜかチュートリアルなどで山ほど見るのでそこは困らなかったのですが、そのまま写経してしまうと同じになってしまうので、7つの習慣という本で４つのセクターに分けてタスクを消化するともっと幸せになれるよというのを参考に4つのカテゴリーから選ぶ様にしました。

Amazon.co.jp

amzn.to

苦労した点

今回作成したサイトがSPAに向いているかは置いておいてvueを使うとかなり簡単にSPAを作成する事が出来ました。
ただやはりvue自体に慣れていない事もあって苦労する点は多かったです。

・苦労した点１：デバック
これは単純にAPI経由のデバックのやり方が分かっていないせいもあるのかもしれませんが、APIで投げたリクエストでlaravelのコントローラーでキャッチするのですが、なぜかvar_dump+exitで止まってくれませんでした。
結局APIの中身を見てオブジェクトを書き換える事は出来たので、その関数を通っている事は間違いないのですが、なぜ止まってくれないのか謎です。
なぜかリスト一覧の時は止まってくれたので、vueのルーター機能でコンポーネント化すれば見れたかもしれません。
ここはもう少し掘り下げて学習が必要です。

ただPHP側でデバックがやりにくいのはありましたが、Vue.js Devtoolsというクロームのアドオンを入れると持っているデータが見れるのでこれを使えば何とかなりました。

Vue.js devtools - Chrome Web Store

DevTools browser extension for Vue.js

chromewebstore.google.com

・苦労した点2:値渡し
今回全部vueで書いたかというとそうではなく結局jqueryも使っています。
ボタンを押した時に自動でセクションの部分が変わるようにしたのですが、その情報をvue側のテンプレートで拾ってくれない・・・。
vueに慣れてる方ならその方法も分かると思うのですが、今回はその部分とリスポンシブ実装の部分をガッツリjqueryで書いてしまいました。

個人的にはやっぱりjqueryって便利だなと再確認したのと、SPAを作るのに関してはvueはかなりお手軽かと思いました。

ただ今回作ったのはタスクを入力してDBに登録、リストを表示する時もDBを読みに行くのでvueで完全な？SPAを作るとしたらnuxt.jsというのを使うみたいです。
検索するとvueはjavascriptのアプリケーション(jqueryとかと同じ)でnuxtはフレームワークみたいです。
nuxtはvue派生ですが、書き方などが少し違うようです。

次学習するのはnuxt、react、swiftもしたい。
この3つの自分の中のポジションは、
■弱点が潰せる
nuxt、react
■強みになるかも
swift

swiftで遊びたいところですが、弱点を潰すのが先かなぁ。

投稿 vueの勉強の為に超シンプルなサイトを作りました は ゴロ寝 に最初に表示されました。

windowsの方を対象にしています

windowsの方を対象にしてしていますが、仮想環境内でのインストールする物などは同じなので、Macの方も参考程度になるとは思います。

windows homeでもdocker desktopが使える！

これまではwindows pro以上の環境が求められていましたが、windows homeでもdocker desktopが使える様になりました。
docker desktopの何がいいって分かりやすさです。

docker psしなくても何が動いているのか一目瞭然です。

ただdocker psは使う事にはなるんですけどね。
しかしコマンドを覚えなければというより、docker psしたくなるのです。
それは追々話しましょう。

まずはdocker desktopをインストールしましょう。

Docker Desktop

Docker Desktop is collaborative containerization software for developers. Get started and download Docker Desktop today on Mac, Windows, or Linux.

www.docker.com

すいません、インストールする際の画面で何が聞かれるか覚えていないです。
基本的に[next]あるいは[次へ]で進めていって問題ないです。

少し時間がかかりますが、docker desktop(長いのでここからdockerと省略します)がインストール出来たと思います。
かわいいクジラアイコンがデスクトップにありますね、あるいはインストール後開くで既に開いているかもしれません。

特に問題なく開けた方はおめでとうございます。
これでdockerはあなたの物です。

しかし、開くと何かエラーが出て起動出来ないという方がいるんじゃないでしょうか。
私もそうでした。
windowsではdockerを動かす為にHyper-Vという機能をONにしてあげる必要があります。
パワーシェルを管理者モードで開いて下さい。

真っ青な画面が出てきましたね。
そこに
bcdedit /set hypervisorlaunchtype auto
と打ち込んでエンターです。

成功しました的な文字が出ればOKです。
一旦再起動しましょう。

hello docker

おそらくdockerは正常に開けたと思います。
チュートリアルでhello dockerが出てくると思いますが、操作になれておきたい人はやってみて下さい。

ちょっとだけdockerの説明をすると、dockerはイメージを元にコンテナを作成します。
意味が分かりませんね。

あまり例えが上手くないのですが、ゲームのドラクエをイメージだとします。
これを起動すると当然ドラクエがスタートする訳ですが、このドラクエいい所まで進んだら普通はセーブをしますね。
dockerの場合はイメージをセーブするのです。
次回からはセーブしたイメージを元にコンテナを作るとセーブした内容が残っているので続きからプレイ出来ます。

意味不明だったら突っ込んで下さい。
要はコンテナは一時的な物で起動している間は内容を覚えてくれていますが、電源を落とすとリセットされてまっさらな状態からスタート出来ます。

ただソースコードやDBの内容などはwindows側にdockerとの共有フォルダを作れるので保存しておく事が出来ます。

では元となるイメージを探してみましょう。

Docker Hub Container Image Library | App Containerization

Welcome to the world's largest container registry built for developers and open source contributors to find, use, and share their container images. Build, push ...

hub.docker.com

今回もvagrant編と同じようにcentos7を使用します。

laravel8開発環境セッティング(vagrant編)

laravel8がインストール出来ないという方向けに書いてみます。 まずは仮想環境を用意しましょう。 というのも筆者がxamp環境でインストールした事が無いのでやり方が分かりません^^; 仮想環境を使えばサクっと出来上がるので、まだやった事が無い人は挑戦してみましょう。

blog.gorone.site

2021.11.06

また前回の記事を読んで頂けたならお気づきでしょうが、laravelが既にセットされているイメージもあります。

ただdockerはイメージを繋いで起動する事が出来るので、上記のイメージはlaravel8のフォルダがあるだけのイメージかもしれません。

そういえば重要な事を書いていなかったのですが、dockerは言語、webサーバー、DB、FWもしかしたらもっと小さい単位で細分化されたイメージがあります。
イメージを使えばいちいち自分でインストールする事なくその環境を手に入れる事が出来るのですが、docker初心者の私からすると最初はベースのOSのイメージとDBの組み合わせが分かりやすいと思います。
勿論慣れてる方ややってみたい方は細分化されたイメージを繋いで色んな言語、DBなどを繋いで遊んでもいいと思います。

なぜベースイメージ+DBをオススメするかと言うと前述した通りdockerのコンテナはストップさせると中の状態をリセットします。
その際ソースコードやDBの中身もリセットされてしまうので共有フォルダに保存しておきます。
そうする事でコンテナがリセットされても途中まで書いていたソースやDBの中身を再現する事が出来る訳です。

なので最低限この２つのイメージを組み合わせると便利という訳です。
という事でcentos7とまたherokuにアップするのが目的なのでposgreのイメージをDLします。

すいません、その前にprojetフォルダを作っておいて下さい。
Cの直下などがオススメです。
そのフォルダの中にdockerなど好きな名前でフォルダを作って下さい。
一応注意として半角英数字でのみで作ったフォルダのパスまでいける様にしておいた方がトラブルが無いと思います。

dockerフォルダでまたパワーシェルを開いて下さい。

そこで
docker pull centos7
と入力してエンターです。

もし失敗してしまったらgitが入っていない可能性があります。
その場合gitを入れて再トライしてください。

Git

git-scm.com

さぁどうでしょうcentos7は落とせたでしょうか。
パワーシェルで
docker ps -a
をしてあげたらcentos7が表示されていると思います。

またせっかくdocker desktopを入れたのでそちらで確認も出来ます。

centos7がイメージの中にありますね。

この要領でpostgresSQLの9.6もDLします。
docker pull bitnami/postgresql:9.6

無事イメージの取得は出来たでしょうか。

さてdockerの起動にはいくつか方法があります。
docker run -it centos7
と書いてあげれば起動します。

これにDBを繋いで・・・。
うんやり方が分からない。難しい。
ちなみに上で起動したcentos7はshellの指定なども行わないと操作できません。
毎回長いコマンドを打たないといけないなんて大変だ、docker難しい・・・。

そんな事はありません。
毎回指定してあげないといけない物はdocker-composeファイルに書いて置いて、それを元に起動してあげればあら不思議。
とっても簡単にDBとの連携も共有フォルダも全部やってくれます。

さぁさぁcomposeファイルを作りましょう。
先ほど作成したdockerフォルダの中に
docker-compose.yml
というファイルを作りましょう。

このファイルはvisual studio codeで開けます。
多分メモ帳でも開けるのですが、何かしらのエディタをオススメします。
というのもこのymlファイルは段落で設定の重要さ？を判定しているので段落がずれると正常に起動しません。
要は段落が分かればいいので、スペースなどが可視化できるエディターの方が書きやすいです。

では中身を見てみましょう。

↓ここから中身

version: '3.7'

services:
  web2:
    container_name: "centos"
    image: centos:centos7
    volumes:
      - C:\project\docker\data:/home/data
    privileged: true
    command: /sbin/init
    tty: true
    ports:
     - 8080:80

  postgres:
    image: bitnami/postgresql:9.6
    restart: always
    environment:
      POSTGRES_HOST_AUTH_METHOD: 'trust'
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: pikatyuu4188
      PGPASSWORD: pikatyuu4188
      POSTGRES_DB: mydb
      TZ: "Asia/Tokyo"
    ports:
      - 5432:5432
    volumes:
      - C:\project\docker\postgres:/var/lib/postgresql/data
 
volumes:
  web1:
  postgres:

↑ここまで中身
とりあえず上記をコピペして保存して下さい。

私も分かっていない部分があるので、全部は説明できないのですが、まず

そういえば大事な事を書き忘れていました。
起動の前に共有フォルダをwindows側で作ってあげておかないとダメです。
上の設定通りだとdockerフォルダの中に[data]と[postgres]フォルダを作ってあげてください。

さぁ準備が出来ました。
パワーシェルで
docker-compose up -d
と打ってください。
数秒でコンテナが出来上がります。

エラーが出た方は突っ込みお願いします。
docker desktopでも起動しているのが分かりますね。
※dockerコンテナは既にあって作れなかったのでcentosとしています

では中に入ってみましょう。
パワーシェルで
docker-compose exec web2 /bin/bash
と打ち込んで下さい。
[root@c5453bb31251 /]#　みたいな表示に変わったでしょうか。
これで後はこの中でnginxを入れたり、phpを入れたりするだけです。

ただ気になる点がある方もいるかもしれません。
パワーシェルで操作するのかよ！そうです、割とやりにくいです。
私も最初tera-tarmで繋ごうと思ったのですが、ググったり設定している最中にdockerは外部から接続するのはナンセンスという事だったのでパワーシェルで操作しています。
どうしても見た目が・・・という方はgit bashを使う方法があります。
git bashはgitを入れると一緒についてくるコンソールツールで見た目もなかなかいいです。

これを使うにはgit bashのexeまで行ってまずショートカットを作ります。
そのショートカットのプロパティで作業用フォルダの中を空にして今作ったdockerフォルダの中に入れてあげます。

これでOKらしいのですが、私の環境だとdockerの中の現在位置が表示されなかったのでなくなくパワーシェルで作業しています。
パワーシェルだとディレクトリが非常に見にくいので(青背景に青文字)なんで青なんだ！と思いますが、コンテナを設定してイメージをセーブしてしまえば対して使わないのでめちゃめちゃ使う時が来たらその時また考えます。
追記：少し調べたら背景色はすぐ変更出来ました。

Color Toolというのを使うとパワーシェルの表示が変えられるっぽいのですが、なぜかコマンドプロンプトがpopになりましたｗ
まぁ背景色を変えるだけで大分みやすいので問題ないです。

https://mimimopu.com/windows-powershell-color-font-change/

mimimopu.com

さて話が脱線してしまいましたが、コンテナで作業した後イメージにセーブしないといけません。
今はdockerの中にいると思いますが、exitコマンドで一度抜けて下さい。
その後docker ps してあげます。

今起動中のコンテナが表示されます。

何か作業をして残しておきたい時はイメージをセーブすればOKです。
セーブするコマンドは、
docker commit [コンテナのID] [好きな名前]
です。

もし画像の状態のcentosをセーブするなら
docker commit c5453bb31251 test
の様になります。

正直この運用方法がdocker的に正しいのか分かりませんが、作業履歴が残せます。
もっと正しい運用方法があれば教えてください！

さて上のコマンドでtestイメージが作られました。
次回からはこのtestイメージを使う訳ですが、docker-composeを少し変えてあげるだけです。

version: '3.7'

services:
  web2:
    container_name: "centos"
    image: test:latest　←ココを変えただけ
    volumes:
      - C:\project\docker\data:/home/data
    privileged: true
    command: /sbin/init
    tty: true
    ports:
     - 8080:80

  postgres:
    image: bitnami/postgresql:9.6
    restart: always
    environment:
      POSTGRES_HOST_AUTH_METHOD: 'trust'
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: pikatyuu4188
      PGPASSWORD: pikatyuu4188
      POSTGRES_DB: mydb
      TZ: "Asia/Tokyo"
    ports:
      - 5432:5432
    volumes:
      - C:\project\docker\postgres:/var/lib/postgresql/data
 
volumes:
  web1:
  postgres:

セーブする際に毎回同じイメージ名でコミットするなら常に最後のセーブポイントから復帰できますし、イメージを自動で上書きしてくれるので余計なイメージを量産する事にもなりません。
逆に分けたい場合はイメージ名を変えてあげればOKです。

ちょっと長くなってしまいましたが、docker desktopの使い方は以上になります。
もっと賢い使い方もあるかもしれませんが、私自身初級者なので是非教えて下さい。

肝心にlarabelのインストールについてですが、作業自体は全く同じなので、vagrant編の[まずはnginxを入れてみよう]あたりから参考にしてみて下さい。
同じcentos7なので全く同じ作業で入るはずです。
ここが分からないなどあれば突っ込みお願いします。

laravel8開発環境セッティング(vagrant編)

laravel8がインストール出来ないという方向けに書いてみます。 まずは仮想環境を用意しましょう。 というのも筆者がxamp環境でインストールした事が無いのでやり方が分かりません^^; 仮想環境を使えばサクっと出来上がるので、まだやった事が無い人は挑戦してみましょう。

blog.gorone.site

2021.11.06

投稿 laravel8開発環境セッティング(docker編) は ゴロ寝 に最初に表示されました。

仮想環境を使うと便利

laravel8がインストール出来ないという方向けに書いてみます。

まずは仮想環境を用意しましょう。
というのも筆者がxamp環境でインストールした事が無いのでやり方が分かりません^^;
仮想環境を使えばサクっと出来上がるので、まだやった事が無い人は挑戦してみましょう。

ちなみにwindows環境を想定しています。
ですが、macでも仮想環境の下地は一緒なのでほぼ同じ作業で出来るはずです

vagrant編

まずvagrantって何？という点ですが、vagrantはVirtualBoxなどを拡張して使う事になります。
VirtualBoxとは仮想環境を作る根本となるソフトです。

VirtualBoxを使えばwindowsの中にwindows、macの中にwindowsなどが出来ます。(bootcampで入れられるなどは一旦置いておいて)
その様な使い方も出来ますが、開発環境を構築するのに向いています。
VirtualBoxの中にlinux(大体がライセンスフリー)を入れて開発環境を構築出来ます。

VirtualBox単体だと下記の様な感じ。

勿論これにlinuxを入れて動かす事も出来ますが、OSのイメージを取得してきてインストールするのはめんどくさいですよね。

そこにvagrantというツールを合わせて使うとお手軽に仮想環境が出来ます。

まずは両方のソフトをインストールします。

Oracle VM VirtualBox - ダウンロード| Oracle Technology Network | オラクル | Oracle 日本

Download the latest version of Oracle VM VirtualBox.

www.oracle.com

Vagrant by HashiCorp

Vagrant enables users to create and configure lightweight, reproducible, and portable development environments.

www.vagrantup.com

最近はあまり無いとは思いますが、verによって上手くvagrantが動かない事があります。
その場合はverを下げてみたりしてトライしてみて下さい。

早速起動といきたいところですが、windows側でも設定する事が1つあります。
windowsのHyper-Vという機能を切ってあげます。
後述しますが、dockerの場合はHyper-Vが必要で、vagrantの場合はHyper-Vがいりません。
一緒に動かせれば一番有難いのですが、私の環境ではどちらか一方しか動かなかったのです。

Hyper-Vを切るには、パワーシェルを管理者として開くで開いて下さい。
デフォルトだと青い画面が開かれたと思います。
そこに下記をコピペして実行してあげてください。

これでハイパーVが切れました。

一旦再起動してください。

さてさて再起動が終わった所でいよいよvagrantの実行です。
Cドライブの直下に「project」フォルダを作って下さい。
正直フォルダ名は何でも大丈夫ですが、半角で英数字でないと上手く起動しないかもしれないです。

作ったフォルダの中に更に「test」というフォルダを作って下さい。
これはvagrantがフォルダ毎に仮想環境を切り替えられるので、プロジェクト毎にフォルダを作った方が利便性が高い為です。
testフォルダの中に入って右上のファイル→パワーシェル→管理者モードでまたパワーシェルを開いて下さい。

また青い画面の登場です。
その青い画面にvagrand initと入れて下さい。
すると、testフォルダの中にVagrantfileというファイルが作成されました。
開いてみましょう。

おーなんだか難しそうですね。
でも実は簡単です。
ほとんどがコメントアウトされている事にお気づきでしょう。
説明が書いてあって、この機能使いますか？という感じに書かれています。

ここで重要なのは4点です。

なので、いらない部分を削ると下記の様になります。(別に削らなくてもOK)

# -*- mode: ruby -*-
# vi: set ft=ruby :
Vagrant.configure("2") do |config|
  config.vm.box = "centos7"　#←ベースのOS
  config.vm.network "forwarded_port", guest: 80, host: 8080　#←apacheなどのポート
  config.vm.network "forwarded_port", guest: 5432, host: 5432　#←DBのポート
  config.vm.network "private_network", ip: "192.168.33.100"　#←tera-termなどで繋ぐ際のIP
  config.vm.synced_folder ".", "/vagrant", type:"virtualbox"　#←共有フォルダ
  config.vm.provider "virtualbox" do |vb|
    vb.memory = "2048"　#←メモリ
  end
end

上のままでも起動できると思いますが、ここでvagrantのイメージを見てみましょう。
今回はまっさらなcentosの7というOSをイメージとして使いましたが、vagrantのイメージは他にもたくさんあります。

HashiCorp Cloud Platform

app.vagrantup.com

linuxというのはwebサーバー向けのOSでwindowsの様にマウスを使ったり、ブラウザがあったりする物もあります。
いわゆるGUIがついている物です。
生粋のプログラマーの方だとwindowsやMacでなくlinuxを普段のPCとして使っている方もいます。
そしてMacもまたUnixというLinuxの兄弟の様なOSをアップルが拡張して作った物になります。
ただunixとlinuxが似ているのは確かでweb開発だと主にlinuxを使うので、そこで兄弟で相性のいいMacを使う方が多いです。

さて少し話がずれましたが、vagrantで使うイメージの話です。
実のところlaravelを使いたいだけなら既にイメージがあります。

これをベースのOSに指定してあげればlaravelはそのまま使えます。
ですが、あまり推奨しません。
自分が使っていないので、どんな物か分からないのと、構築する楽しみが味わえないなんて勿体ない！

あと自分で構築した物だと最低限自分で入れたソフトウェアの設定箇所などが分かるので便利です。

ここから先は若干難しいですが、1時間ほどで出来ると思います。

仮想環境の中に入ろう

OSを入れたての場合はまずOSを更新してあげましょう。
windowsやmacで言うところの機能の更新です。
linuxはサーバー用途で使う事が多いので、自動では機能の更新をしません。

その為、入れたてのlinuxはまず全体の更新をしてあげましょう。
ここからはcentos7を入れた物として書きます。
linuxにも種類がありますが、良くAWSのamazon linuxも同じコマンドで扱えるのでcentos(red hat系)で慣れておくと便利です。

まずはlinuxに接続する必要がありますね。
私はtera-termというソフトを使いますが、これもコンソール系のアプリが色々あるので好きなのを選択して下さい。
もしtera-termでいいよという方は下記からDLして下さい。

窓の杜

「Tera Term」定番のターミナルエミュレーター

forest.watch.impress.co.jp

Macの場合は、コンソールから出来ると思うのですいませんがググってみて下さい。
又、実はwindowsの場合も先ほどのパワーシェルの画面から仮想環境の中に入れます。
vagrant sshと入力すると仮想環境の中に入れます。

私はパワーシェルだとディレクトリが見にくいのと実際にAWSなどに接続する際もtera-termなどを使うのでコチラをオススメします。

先ほど設定したtera-termなどで繋ぐ際のIPを入れて下さい。
ポートは変更していないなら22でOKです。
次に進むとパスワードを聞かれます。
ここも何も設定していなければ、
ユーザー：vagrant
パスワード：vagrant
で入れます。

どうでしょうか、入れたでしょうか。
入れれば下記の画面の様になります。

おめでとうございます！これでもう好き勝手に遊んでいい仮想環境が手に入りました！
この中で何か不具合が起きてもwindowsやMacにも99%影響がないので安心して下さい(ファイルの容量は使いますけどねｗ)
さてまずは先ほど書いたOSのアップデートを行いましょう。
sudo yum update
と入力してエンターを押してあげて下さい。
途中で
Is this ok [y/d/N]:
と聞かれるので y と入力してエンターです。

何やら凄い量のファイルが表示されますね。
でも安心して下さい。
特殊な環境を除けばyum はファイルの互換性などを自動で調整してくれるので安心です。

まずはnginxを入れてみよう

まだ何やら文字列だらけで本当に動いているのか分からないですよね。
まずはnginxを入れてブラウザで仮想環境が動いている事を実感しましょう。

nginxとは何ぞやという話ですが、apacheと近しい物という認識でOKです。
nginxの方が大体の環境においてapacheより描写が早いのが特徴です。

sudo yum install nginx　でそのまま入るかもしれませんが、どうせなら最新の物を入れましょう。
最新の物を入れるにはリポジトリを追加します。
リポジトリとは何ぞやですが、yumコマンドで何かインストールする時はリポジトリを参照してインストールします。
なのでリポジトリに無い物や新しいバージョンの物を入れたい時にはリポジトリを追加してあげます。

ここでviを使います。
メモ帳みたいなもんです。
ただこのメモ帳はクセが凄いので慣れが必要です。
まずは
sudo vi /etc/yum.repos.d/nginx.repo
と入力しエンターを押してください。

何も書かれて無い画面が表示されましたね。
まずは　a を押して下さい。
左下の文字がinsertに変わりましたね。

これで文字を入力する準備が出来ました。

そこに下記をコピペして下さい。
windowsではコピペする時に「貼る」などを選択する必要がありますが、linuxでは右クリックするとコピペできます。

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1

コピペ出来たらEscキー、キーボードの一番左上のキーを押して下さい。
insertの文字が消えたらOKです。
その次に :wq
と入力して下さい。
これで保存出来ました。

viには :　の次に色んなコマンドを入れてファイルを操作する事が出来ます。
今回の場合は
w ←保存
q ←viを抜ける
です。

vimerの方にはそれちょっと違うよと突っ込まれてしまいそうですが、vi,vimにはあまり慣れていないのでお許し下さい。

さてこれで最新のnginxを入れる用意が出来ました。
sudo yum install nginx
を実行しましょう。

またザザっと文字が出てきてy n が出ていると思いますが、yです。
適当な翻訳：nginx入れるけどいいか？y(yes)n(no)どっちだ？です。

ちなみにそんなのyesだよという方は
sudo yum install -y nginx
と入れて下さい。
お察しの良い方はyesだよと最初から指定出来ます。

さて入れただけではまだ動いていません。
sudo systemctl start nginx
と入れてあげると動きます。
ついでに
sudo systemctl enable nginx
も入れておきましょう。

基本的にcentos7は
systemctl start
systemctl stop
systemctl restart
でソフトに命令を出せます。

systemctl enable　の方はwindowsでいうスタートアップみたいな物でcentosが起動したら一緒にそのソフトも起動させてくれます。

さて、これで仮想環境のnginx君は動いています。
http://localhost:8080/
又は、
http://192.168.33.100:8080
などをブラウザで開いてみて下さい。

おそらくnginxだよ！みたいな画面が出てくると思います。
私の場合は既に設定があってファイルパスを変えただけだと上手く最初の画面が開けなくて悲しい画面でした。

phpを入れてみよう

さてお次はPHPを入れてみましょう。
これも好みはありますが、どうせなら最新の物を入れましょう。
最新の物を入れるにはまず、リポジトリの追加ですね。
これは先ほどより簡単、です下記のコマンドを実行しましょう。
sudo yum -y install http://rpms.famillecollet.com/enterprise/remi-release-7.rpm

これで最新のPHPを入れる事が出来ます。

一応レポジトリが入っているか確認してみましょう。

[vagrant@localhost ~]$ ls -l /etc/yum.repos.d/
合計 116
-rw-r--r-- 1 root root 1664 7月 8 12:42 CentOS-Base.repo
-rw-r--r-- 1 root root 1309 11月 23 2020 CentOS-CR.repo
-rw-r--r-- 1 root root 649 11月 23 2020 CentOS-Debuginfo.repo
-rw-r--r-- 1 root root 630 11月 23 2020 CentOS-Media.repo
-rw-r--r-- 1 root root 1331 11月 23 2020 CentOS-Sources.repo
-rw-r--r-- 1 root root 8515 11月 23 2020 CentOS-Vault.repo
-rw-r--r-- 1 root root 314 11月 23 2020 CentOS-fasttrack.repo
-rw-r--r-- 1 root root 616 11月 23 2020 CentOS-x86_64-kernel.repo
-rw-r--r-- 1 root root 1457 9月 4 19:37 epel-testing.repo
-rw-r--r-- 1 root root 951 7月 8 12:47 epel.repo
-rw-r--r-- 1 root root 1358 9月 4 19:37 epel.repo.rpmnew
-rw-r--r-- 1 root root 99 11月 6 01:50 nginx.repo
-rw-r--r-- 1 root root 446 9月 2 11:35 remi-glpi91.repo
-rw-r--r-- 1 root root 446 9月 2 11:35 remi-glpi92.repo
-rw-r--r-- 1 root root 446 9月 2 11:35 remi-glpi93.repo
-rw-r--r-- 1 root root 446 9月 2 11:35 remi-glpi94.repo
-rw-r--r-- 1 root root 855 9月 2 11:35 remi-modular.repo
-rw-r--r-- 1 root root 456 9月 2 11:35 remi-php54.repo
-rw-r--r-- 1 root root 1314 9月 2 11:35 remi-php70.repo
-rw-r--r-- 1 root root 1314 9月 2 11:35 remi-php71.repo
-rw-r--r-- 1 root root 1314 9月 2 11:35 remi-php72.repo
-rw-r--r-- 1 root root 1314 9月 2 11:35 remi-php73.repo
-rw-r--r-- 1 root root 1314 9月 2 11:35 remi-php74.repo
-rw-r--r-- 1 root root 1314 9月 2 11:35 remi-php80.repo
-rw-r--r-- 1 root root 1314 9月 2 11:35 remi-php81.repo
-rw-r--r-- 1 root root 750 9月 2 11:35 remi-safe.repo
-rw-r--r-- 1 root root 2605 9月 2 11:35 remi.repo

PHPの8.1版まで入れられますね。
lalavel8はPHP7.3以上入れればいいので、安定版だと思われる74。最新の81どちらでも大丈夫です。
私はdockerでは8.1でvagarantでは7.4ですがとくに意味は無いです。
両方動きますし、本番環境と合わせてあげると良いです。

ではvagrantでは7.4なので7.4をインストールするコマンドです。

sudo yum -y install --enablerepo=remi,remi-php74 php php-mbstring php-xml php-xmlrpc php-gd php-pdo php-pecl-mcrypt php-mysqlnd php-pecl-mysql php-fpm php-zip php-pgsql

最新の物を入れたい方は、赤のラインの所をphp81にして下さい。

これが入れ終わったら、

sudo yum install --enablerepo=remi-php74 composer

も入れて下さい。(一緒に入れても問題ないかもですが)

このcomposerなる物でlaravelを入れます。
このcomposerですが、PHP版のyumみたいな物でlaravelに何か機能を追加する時に使うのと、laravel意外のFWを入れる時もPHPのこの機能が足りないよなどと教えてくれます。
結構嫌いな人も居るみたいですが、最終的にherokuなどにアプリをアップする時は必要になるのでとりあえず入れておきましょう。

PHPは入れ終わったので、実際に動いているか確かめましょう。
まずphp-fpmというプログラムを起動します。
これは先ほどと同じ様に、
sudo systemctl start php-fpm
ついでに
sudo systemctl enable php-fpm
としてあげます。

次に共有フォルダの中にdataというフォルダを作って、その中にindex.phpというファイルを作ります。
その中身に

※すいませんコードを書いたらエスケープが働いて表示されなかったので画像にしました
とだけ書いて保存して下さい。

次にnginxの設定です。
下記を開いて下さい。
sudo vi /etc/nginx/conf.d/default.conf

余計な記述もありますが、とりあえず下記をコピペして下さい。

server {
listen 80;
server_name localhost;
root /vagrant/data;
charset UTF-8;
access_log /var/log/nginx/www.example.com.access.log main;
error_log /var/log/nginx/www.example.com.error.log;location / {
index index.php index.html index.htm;
try_files $uri $uri/ /index.php?$query_string;
}error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}location ~ \.php$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}}

保存して閉じて下さい。:wq

そうしたら、nginxを再起動します。
sudo systemctl restart nginx

どうでしょう、下記の様な感じに表示されたでしょうか？

表示されたらPHPちゃんは息をしております。

さて結構作業をしてお疲れかもしれませんが、laravelを入れる際にcomposerでメモリオーバーになるのでついでに設定しておきましょう。
下記のファイルを開きます。
sudo vi /etc/php.ini

そうしたら、　:/memory
と入力してみて下さい。

おそらくmemory_limitの所へ飛べると思うので、
aを押してインサートモードで　memory_limit = -1　として下さい。
出来たら:wqで閉じて下さい。

DBを入れよう

1時間で終わると書いておきながらもっと必要かもと思い始めましたｗ
適度に休憩しながらしましょう。

さぁお次はDBです。
普通ならmySQLといきたい所ですが、私がherokuにあげるつもりで作ったのでposgresSQLを使います。
mySQL編はまた今度追記するのでお許し下さい。

ただlaravelを使うと分かりますが、mySQLでもposgreでも全く問題ない事に気づくはずです。
今まで最新の物を入れていましたが、ここはyumで普通に入る物を使います。
事情は別の記事にあるので良かったら探してみてください。
posgreの最新の物にしたい方はリポジトリを追加して下さい。

ではサクっとインストールしちゃいます。
sudo yum install -y postgresql-server
sudo postgresql-setup initdb
sudo systemctl enable postgresql.service
sudo systemctl start postgresql.service

これでポスグレの起動はOKです。
次にポスグレユーザーのパスワードを変更します。
sudo passwd postgres
ここは好きなパスワードでOKですが、上はlinux上のポスグレユーザーのパスワードでDB上のpostgresユーザーもパスワードも変更します。
セキュリティ上よろしくは無いのですが、ごっちゃにならない様に同じパスワードにしておくのもありです。

su – postgres　と入力して先ほど設定したパスワードを入れて下さい。
ユーザーの切り替えが出来たら、おそらく
-bash-4.2$
のようになっていると思います。

まずDBを作成してしまいます。
createdb mydb;
mydbの部分はお好きに変えて下さい。

この画面のまま　psql　と入力するとポスグレの中に入れます。
中に入ってpostgresユーザーのパスワード変更を行います。
alter role postgres with password ‘postgres’;
”の中身がパスワードになります。

￥l←(小文字にして下さい)と入力すると作ったDBが見れます。

postgres=# \l
データベース一覧
名前 | 所有者 | エンコーディング | 照合順序 | Ctype(変換演算子) | アクセス権
-----------+----------+------------------+------------+-------------------+-----------------------
mydb | postgres | UTF8 | ja_JP.utf8 | ja_JP.utf8 |
postgres | postgres | UTF8 | ja_JP.utf8 | ja_JP.utf8 |
template0 | postgres | UTF8 | ja_JP.utf8 | ja_JP.utf8 | =c/postgres +
| | | | | postgres=CTc/postgres
template1 | postgres | UTF8 | ja_JP.utf8 | ja_JP.utf8 | =c/postgres +
| | | | | postgres=CTc/postgres
(4 行)

￥qでデータベースから抜けて更にpostgresユーザーからexitと入力して抜けて下さい。
sudo systemctl restart postgresql.service
をしておいて下さい。

いよいよlaravel

お待たせしました。
いよいよlaravelをインストールしましょう。
まずlinuxとwindowsの共有フォルダに移動します。

かなーり初期に書いたvagrantの初期設定だと
cd /vagrant/data/
で共有フォルダに移動出来ると思います。
data一応あった方がいいので、無い場合はwindows側で作ってリナックス上で上記のコマンドで移動できるようにしましょう。

おまんたせしました。
ではlarabelを入れましょう。
とは言ったものの１コマンドで作ってくれます。

composer create-project laravel/laravel example-app

testは好きに変えて下さい。

composerくんがぐんぐん色んなファイルを作成してくれます。
Application key set successfully.
が出たら、共有フォルダで作ったので、勿論ファイルが出来ています。

さぁ初期画面が見たいですよね。
nginxでlarabelを指定してあげましょう。
sudo vi /etc/nginx/conf.d/default.conf

server {
listen 80;
server_name localhost;
#ここは「sync」フォルダ以下にあるファイルを参照してほしいので、「sync」の同期先であるvar/wwwを指定。
root /vagrant/data/test/public;
charset UTF-8;
access_log /var/log/nginx/www.example.com.access.log main;
error_log /var/log/nginx/www.example.com.error.log;location / {
index index.php index.html index.htm;
try_files $uri $uri/ /index.php?$query_string;
}error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}location ~ \.php$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}

}

さぁどうでしょうかちゃんと表示されてますでしょうか。

私は大丈夫でしたが、元々作った環境を見ながらこの記事を書いたので、何とも言えないのです。
もし出来ないよーなどがあればお知らせください。

ちなみにvagrantではnpmが上手く機能しないと思います。
すいません、ちょっと長くなりすぎたので、npmに関してはこちらの記事をご参照下さい。

laravelで苦労した点3

laravelをインストールすると大量のvenderファイルとnode_modulesがを入れる事になります。 venderファイルの方は問題ないのですが、node_modulesを入れるためのnpm installが多分動かないです。

blog.gorone.site

2021.10.18

投稿 laravel8開発環境セッティング(vagrant編) は ゴロ寝 に最初に表示されました。

DBのデータって外に保存しない方が良い？

あくまで開発環境の話であって、個人開発の話では無いです。

開発環境を配る時ってDBにデータが投入されていた方が便利ですよね。
前の会社では結構な規模だったので、開発環境はAWSの開発環境用のDBに繋がる様に設定されていました。
前の会社が結構特殊で仮想環境などを使わずに一人1台？EC2を配るというなかなか豪快な環境だったので、かなりレアだと思うのですが、
基本的にDBにはデータが投入されていた方がいいと思うのです。

seedsなどでテストファイルをDB作成時に作るのもいいですが、そこのファイル容量は手間を考えればあった方が良さそう。
今、個人開発しているlaravelのアプリもデータ永続化の為にwindows上にデータを持たせていますが、DBのイメージをセーブすれば多分データは残るはず？

さすがに永続化のデータを配るならDBのイメージを共有した方がいいはず。
ん～でも開発環境と言えど、新規のデータ、新鮮なデータを共有した方が良さそうなのでDBだけでクラウド上で共有した方がいいかもですね。

ちょっと脱線

私は開発にブランクがあるので、開発に使うツール類の進化が凄いです。
それはエディターにも言える事だし、FWもめちゃ進化してます。
特にvisual stadio codeとlaravelにはびっくりしました。

visual stadio code

ATOMではプラグインだったcssの色表示も標準で搭載されているし、なんかもっとカスタマイズするともっと便利になるみたい。
コード自動実装機能は本当にあるし、マイクロソフトの本気ですね。
元々visual stadioは便利だったので、その技術をweb向けにカスタマイズした感じですね。

tailwindのプラグインとCSSセットを使うと何やらもっと凄いっぽいですが、まだ試してないですね。
bootstrap版とかもあるのでしょうか。

まだこのエディタの10%も使いこなせていないので、早く慣れない所です。

laravel

web職人の為のFWとどこかでみた気がしますが、私が触ってみた感想としては、web初心者向きのFWですね。
個人認証機能もガッチリした物がついていて、cssとかjavascriptもlaravel mixで構文をチェックしてくれる。
まぁガッチリ触ってないので、何ともですが、フォルダのジャンル分けが分かりやすい。

とりあえずMVCの置き場所だけ覚えればいいし、rootファイルも分かりやすい。
後地味に凄いのが
Route::resource
と書くと7?8種類のcludが自動生成される事です。

そのコントローラーも
php artisan make:controller コントローラー名 –resource
と書くと動きに合わせたコントローラーを自動生成してくれます(メソッドは定義してくれるけど、中身は空です)

良く使い方が分からず、無理やり作った部分もありますが・・・。

キレイに書くならresourceに合わせて書いて、力技でも実装出来るのがいい所ですね。
ただ、その分表示速度は犠牲になっているみたいです。
venderをオーバーライドしただけでモッサリしたので、何かチューニングが出来るのかな？
モッサリ部分を感じさせない工夫が必要かもしれないですね。
勿論いいサーバーを使えば早いでしょうが。

話は変わりますが、数年前にrailsを試した時はその便利さとチュートリアルのテストがかなり難しい。
正直機能と同等かそれ以上のテストを書いた気がします。

laravelは必要部分だけつまみ食いしたのでテストは書いてないんですよね。
書くとしてもDBの登録部分とかになるけど、やっぱり業務で使うとなるとテストは大事なのでそこは勉強しておきたいです。

正直PHPで新規でアプリを作るならlarabel一択だと思います。
一応cakeとかも触ってますが、断トツで分かりやすい。
といつつPHPはFWが豊富なのでまだ試していないのがたくさんあります。

PHPはアカデミックな言語ではないですが、HTMLに埋め込める部分が強いのかなと思います。
あまり良い使い方では無いですが、viewの中でPHPを実行したりと結構めちゃくちゃできます、他の人に怒られます・・・。

とりあえずまずは、PHPとreactかvueを素で書ける様に勉強します（実際は遊んでるだけなのですが・・・）
その次はせっかくmacもあるのでswiftを書けるようになりたいです。

以上、願望でした。

投稿 開発環境構築の話 は ゴロ寝 に最初に表示されました。

苦労という感じでは無かったけれど

そういえばかなり初期に起きた出来事なので、忘れていましたが、vagarantで起きた珍事。
多分docker、もっと広く言うとwindowsで仮想PCで作業していたら起きそうな事です。

laravelをインストールすると大量のvenderファイルとnode_modulesがを入れる事になります。
venderファイルの方は問題ないのですが、node_modulesを入れるためのnpm installが多分動かないです。
人によって開発の仕方は変わると思いますが、手っ取り早いのがvagrantとwindowsの共有フォルダにlaravelプロジェクトを作るとgitでもソースツリーが使えますし、エディターもwindows環境で動く物が使えます。
なので大体の人は共有フォルダにプロジェクトを作ると思うのですが、node_modules内でシンボリックリンクがあるためnpm installが出来ません。

解決方法は色々とあるようですが、vagrant内のフォルダ(ディレクトリ)と共有フォルダ内でそれぞれnode_modulesフォルダを作りマウントコマンドでバインドする。

linuxでマウントというとUSBなどを繋いでマウントして使うという感じで使用するのが一般的な様ですが、マウント&バインドするとnpm install出来る様になります。

linuxのhomeの下くらいにnode_modulesディレクトリを作って、共有フォルダ側でもnode_modulesディレクトリを作ってあげます。
この2つをマウント&バインドする事で動きます。
若干まだマウント&バインドがどういう仕組みなのか不明ですが、おいおい勉強します。
多分マウントする事でlinux側のディレクトリではシンボリックリンクが作れるので動くのかなと。

さてさて言い訳はこのぐらいにしてやり方です。

linux側のディレクトリの作り方は調べて下さい。

初回は割と時間がかかります。
よくよく考えたらnpm無しでもlaravel自体は動く様な気がしますが、javascriptのエラーをチェックしてくれたり、scssをcssに変換してくれたりと多分最近の開発ではメジャーなので入れておいた方がいいでしょう。

もう少し続くよ

そういえばnode自体はyumで入りますが、verが古いので更新してあげて下さい。
この更新に古いnodeが必要なので必ず入れる事になります。
nodeが入ったら、

で最新のバージョンにしてあげましょう。

多分これで最新なjavascriptフレームワーク&scssなどがコンパイル出来ます。

一点謎なのが、javascriptをコンパイルすると、letやconstがvarになる^q^
詳しい人教えて下さい！
TypeScriptが何たらとあるのですが、letやconstって純粋なjavascriptだと無いのかな？

なんかモジュールを入れたらもしかしたら普通に変換するかもしれないし、無いかもしれない・・・フロントには詳しくないので謎です。

vueはちゃんと使えるようになりたいので、お勉強中です。

投稿 laravelで苦労した点3 は ゴロ寝 に最初に表示されました。

前回jetstreamを入れましたが、この機能モリモリの認証パッケージにはプロフィール写真を変える機能があります。

宣伝：良かったら使って下さい。

https://megapho-ne.com/

megapho-ne.com

で、https化をcloudflareで実現した訳ですが、新しいプロフィール写真をアップロードすると404が返ってくる。
一時上手く動いていた気がしますが、先ほど触ったら404、ググっても外人さんも困っております。

ただその外人さんの意見の中で404ステータスを返す部分をコメントアウトしちゃえ！という物がありました。
ローカル環境では問題なく動いてますし、何ならherokuの独自ドメインの場合でもちゃんと動きます。
cloudflareを通してhttps化した時だけ上手く動かないのです。

やりましょう。
やり方は至ってシンプル。
コメントアウトすればいいだけです。
ただ、そのファイルがベンダーファイルなのでオーバーライドして書く必要があります。

laravelのベンダーファイルのオーバーライドの仕方は、ググったらすぐ出て来ました。

やり方はappフォルダの中にオーバーライド用のフォルダを作ってそのパッケージごとコピーして対象のファイルを上の様に書いてあげます。
パッケージごとコピーするのでそこまで必要があるのか不明ですが、ファイル単位でも出来ないかやってみます。
こんなんで404が消えるのか不安でしたが、無事オーバーライドされていました。
ちなみに変更した点は本当に些細な部分で下記の通りです。

Stack Overflowなどを見るとnginxの設定で消せるのかもしれないです。
今回は緊急措置という感じです。

やってみたら気持ちモッサリしたので、他の方法があれば知りたいです。

投稿 laravelで苦労した点2 は ゴロ寝 に最初に表示されました。

フォルダが多い

最初にlarabelに触った感触としてそのフォルダ数に戸惑うと思います。
慣れてしまえば納得のフォルダ構成なのですが、MVCである所のモデル、ビュー、コントローラーがどのフォルダに当たるのか直感的ではありません。
一番上位のフォルダですら下記の通りです。

appの中に全部あるのかと思いきやそうではありません。

独学なので正解か分かりませんが、MVCに当たるフォルダを見てみましょう。

モデル

モデルは比較的に簡単に見つける事が出来ます。
appの中にすぐmodelと書いてあるフォルダがあります。
これはすぐ分かりますね。

ビュー

ビューはリソースの中にあります。
view配下で画面事にサブフォルダも作れるので便利ですが、そもそもappの中にあった方が分かりやすいかもと思いました。
多分設定によっては移動させる事も出来そうですが、laravel初心者の私には難易度が高すぎなのでリソースの中で管理していました。

コントローラー

これはappの中にありますが、httpという一見関係なさそうなフォルダの中に眠っております。

触り始めの初期はこの配置に凄く違和感を覚えましたが、慣れてしまえばそうでもないです。
あと分かりやすくする為のポイントとして、それぞれのファイルは

コマンドで再生した方がいいでしょう。
artisanコマンドで再生すれば必ず正しい位置に部品を置いてくれるので、間違いが少なくて済みます。

また必ずgitなどのver管理システムを入れて、エディタも新規のファイルを検知してくれる物がオススメです。
私はATOMを使っていますが、今だとvisual studio codeの方が主流なのかな？
Vimなどを使っている方は分かりませんが、私よりフレームワークの理解度が高いと思うので問題ないでしょう。

laravelは便利

そんなlaravel君ですが、アドオン？が凄く充実しています。
ユーザー登録や管理などjetstreamが凄く便利でかっこいいです。
jetstreamは機能モリモリの認証系ライブラリなのでそこまで必要ない方は入れなくてもいいかもです。

jetstreamの入れ方は簡単です。
プロジェクトのトップで

DBとの接続方法をまだ書いて無いのでこの後書きますね

最後にjetstreamを動かす為のjsなどをコンパイルする為に
npm install && npm run dev
としてあげましょう。
これももしnodeを入れてないと出来ないので、もし入っていない方はyumなどで入れてあげて下さい。

jetstreamの導入でDBとの接続が必要になりましたが、これも簡単です。
.envファイルにDB接続の情報を記す部分があるので、ここに書いてあげます。
私の場合はポスグレを使ったので、mySQLの場合はその情報でOKです。
先にlarabel用のDBは作っておいて下さい。

これだけでDB接続OKです。
繋がったか試す為にphp artisan migrateしてあげるといいでしょう。
認証情報が違う場合は注意が出るのですぐ分かります。

またnodeの入れ方については下記の記事が凄く分かりやすいので見て下さい。

nodejs、npm の最新版をインストールする（CentOS） at softelメモ

問題 yum で npm をインストールすると、だいぶバージョンが古いのですが、新しいバージョンのをインストールするにはどうしたらよいですか。 $ npm -v 3.10.10 $ node -v v6.17.1 （Ce ...

tech.softel.co.jp

これでユーザー登録画面とユーザー管理などが出来ます。

ツイッターの認証とグーグルの認証は別途設定が必要ですが、検索するとすぐ出てくるのでペペっと出来ます。
機会があれば書いてみます。
herokuの場合はユーザーの画像を保存出来ないので、一工夫必要です。
私の場合は、cloudinaryというアドオンを入れてそこに保存される様にしています。
cloudinaryの公式のアドオンもありますが、jrm2k6/cloudderというライブラリが使いやすいので、オススメです。
cloudinary自体は10GBまで画像やvideoを保存できるので画像をバンバン使うサービスじゃない限りは大丈夫ですし、課金すれば10GB以上使える様になります。

という訳で今回はjetstream中心に書いてみました。

投稿 laravelで苦労した点 は ゴロ寝 に最初に表示されました。

laravelでデモアプリを作成しました

https://megapho-ne.com/

megapho-ne.com

公開環境はherokuでドメインは1円なので運用費は年に1円です。
何でドメインを取ったかというと、https化するには独自ドメインが必要だからです。
もしかしたら無料でネームサーバーを設定出来るドメインサイトがあれば無料でいけるかも。
まぁherokuで自動でつけてくれるドメインでもhtppsなんですけどね。
ブログが独自ドメインなのでドメインってこんなに簡単に取得できるんだーと知ったので取ってみた次第です。

https化の仕組み

今回お名前ドットコムでドメインを取得しましたが、多分追加料金を払わないとhttps化は出来ない？と思います。
じゃあどうやったんだという話ですが、検索すれば良くあるcloudflareを利用しています。
cloudflareはキャッシュを提供する無料のサービスですが、少し設定すればhttps化出来ます。
自分のアプリにアクセスする際にcloudflareをクッションにしてhttps化してくれます。

何でherokuにしたの？

herokuにこだわりがある訳じゃないですが、まず無料という事です。
もちろんherokuもお金を払えば大規模アプリも作成出来ますが、商用サイトだったらアマゾンのEC2などサイトの規模も簡単に大きく出来るサービスがあります。
herokuはしがらみが多いですが、個人でアプリをアップするにはお手軽なサイトです。
無料で使うと30分アクセスがないとサーバーがスリープ状態になったり、画像が保存できないなど色々としがらみがあるのですが、DBだったり画像保存サービスなどアドオンで追加出来るので楽しいです。
画像が保存出来ないというよりはファイルシステムで管理されてないファイルは半日に1回だけリブートされる様で消えちゃいます。
ただDBだったり、色んなサービスを組み合わせると画像掲示板も作れますし、まぁ何でも作れます。

herokuで苦労する事も

laravelでherokuにデプロイすると必ずコンポーザーが必要になりますし、基本的にベンダーファイルを保持してくれません(gitでvenderを含めると維持出来ます)
私もベンダーファイルをいじっていましたが、途中からなるべく管理画面などもベンダーフォルダから切り離しました。
ローカルとherokuで見た目が変わったりしちゃうので、必要なベンダーファイルだけオーバーライドすればOKです。

まぁ本当はlaravel8に慣れるのにかなり苦労しました。
ショボイアプリですが、ここが苦労したよlaravelくん編を書こうかなーと思います。
本当はもうちょっと色々と機能をつけたいですが、永遠に公開出来なさそうなので基本的な機能は出来たので公開しました。

投稿 laravelでデモアプリを作りました は ゴロ寝 に最初に表示されました。

postgresSQLはyumで入れた

PostgresSQLを最新のverにするかしないかを迷いましたが、今回はyumで入る物を利用しました。
最新の物にした方が新しい機能が使えたりといい事もあるのですが、yumで入る物ならセキュリティパッチもおそらく当てられているし、PostgresSQLを拡張して使う気は無いのでyumで入る物で十分です。

話がずれてしまいますが、postgresSQLはジオロケーションを使える様にしたり、add onと言っていいのか分かりませんが拡張が優れています。

正直に言うとこれを最新版にするかしないかで結構迷っていました。
おそらくherokuにupすると最新版になるので、verがずれて大丈夫かなという迷いがありました。

その一方、昔最新版を入れてかなり苦労したので、迷いました。

後はLaravelをインストールするだけ

laravelをインストールする為にcomposerを入れます。
composerはlinuxで言う所のyum、PHP版のyumみたいな物です。
composerを入れなくてもlaravelをインストールする事は出来ますが、足りないライブラリなどを教えてくれるので、入れておいた方がいいです。

composerを入れます

つまずいたという程では無いのですが、laravelを入れる時に最初ライブラリが足りないと言われたので、そのライブラリをインストールしてもなぜか同じ警告が出る。
処理を見ているとphpの5系をなぜか参照しようとしている箇所があったので、ググって見たので、下記の様にしてあげる事で回避出来ました。

これで7系のphpを参照してcomposerが入ります。

laravelを入れよう

composerを入れてあげたらいよいよlaravelのインストールです。

バージョンをつけてあげる事も出来る様ですが、今回はつけないで入れました。

で、また警告が出ました。
今回はPHPのメモリが足りないと怒られました。
ここはphp.iniをでサクっとメモリの量を上げてあげれば解決です。

数分でlaravelアプリが出来ます。

今回はherokuに最終的にアップしたいので、使うDBをpostgresSQLにしてあげます。
これは非常に簡単でlaravel内の.envというファイルのDB情報を変えてあげるだけです。
DBの接続情報自体はdatabase.phpというファイルにあるのですが、中を見ると.envの情報を参照するよと書いてあるので、.envの情報を変えてあげるだけでOKです。

ちゃんと接続出来たか確かめたいので、下記のコマンドを実行してあげます。

ここで特にエラーが出なければちゃんとDBに接続出来ています。

後はlaravelの初期画面を見たい。
ここで結構苦戦してphpの簡易サーバを使えばすぐ見れるとの事でしたが、vagrantを使用しているので、色々試しましたが見れません。
一段飛び越えてnginxで直接見ることにしました。

それでも権限やら色々とありましたが、エラーログや検索を駆使して表示される様になりました。

なんかlaravel8で画面が変わったらしい。
確かに検索したサイトではもっと爽やかな感じだった。
まぁとりあえず表示されたので、一安心です。

投稿 Laravelが動く環境を整える3 は ゴロ寝 に最初に表示されました。

とりあえずPHPを入れよう。
そうだまずはPHPだという事で最新の物を入れようと思います。

とPHPのインストールは簡単だろうと思っていたのですが今まで出た事のないエラーが。

One of the configured repositories failed (不明),
and yum doesn't have enough cached data to continue. At this point the only
safe thing yum can do is fail. There are a few ways to work "fix" this:
1. Contact the upstream for the repository and get them to fix the problem.
2. Reconfigure the baseurl/etc. for the repository, to point to a working
upstream. This is most often useful if you are using a newer
distribution release than is supported by the repository (and the
packages for the previous distribution release still work).
3. Disable the repository, so yum won't use it by default. Yum will then
just ignore the repository until you permanently enable it again or use
--enablerepo for temporary usage:
yum-config-manager --disable <repoid>
4. Configure the failing repository to be skipped, if it is unavailable.
Note that yum will try to contact the repo. when it runs most commands,
so will have to try and fail each time (and thus. yum will be be much
slower). If it is a very temporary problem though, this is often a nice
compromise:
yum-config-manager --save --setopt=<repoid>.skip_if_unavailable=true
Cannot retrieve metalink for repository: epel/x86_64. Please verify its path and try again

検索すると、メモリがいっぱいかタイムアップのエラーらしい。
検索しても結構作業が発生しそうな予感。
PHPを入れるだけでここで躓くのか・・・。
とりあえずepelリポジトリーのミラーを切ってみましたが、今度は通信が届かないとのエラー、どうしたものか。
ダメかと思ったのですが、色んなミラーを自動で試してくれるようで何とかなりました。

とりあえずPHPの7.4系を入れました。
8系は新しすぎるので安定のverにしました。
そういえばnginxを入れるので、PHP-fpmを入れないとダメだ。

全部突っ込んでしまおうと思えば、
sudo yum -y install –enablerepo=remi,remi-php74 php*
で入るのですが、それはお作法的に良くないので、使う物を入れるのが良いです。
多分この時点でPHPの付属品としては足りない物が多いですが、lalavelを入れる際に多分Composerを使うと思うので、足りない物はその時に教えて貰えます。
ComposerはPHP版の依存関係をよしなに教えてくれる物でlinuxのredhat系で言う所の yum に近いです。
じゃあyumは何なんだという話になりますが、例えばPHPを動かす時に実はPHPだけをインストールしただけじゃ動かないので、いい感じに必要な物を入れてくれるサポーター？みたいな感じです。

linuxでかなり専門的な事をやろうとするとパッケージから入れる事もあると思いますが、まずはyumで出来ないか調べた方がいいです。
過去にyumで解決出来ない事も1度ありましたが、1度しかありません。
その時はパッケージから入れて、yum のアップデートでその入れた物だけ除外してアップデートを行う様にしていました。
ほぼ無いと思いますが、yumも万能ゆえに例外的な事が出来ない時もあるので、その時は先輩エンジニアかteratailという掲示板で聞いてみましょう。
teratailは先輩にわざわざ聞くのも忍びないという心配症なあなたに速攻で答えを答えを教えてくれるサイトです。
私もバリバリエンジニアの時は良く聞いていました。
最近は活発か分かりませんが、約数十分で答えが返ってくるので有難い掲示板です。
会社が近かったこともあり、最初のオフ会に参加したこともあります(自慢・・・なのか)

teratail【テラテイル】｜ITエンジニア特化型Q&Aサイト

teratail（テラテイル）はプログラミングに特化したQ&Aサイトです。実現したい機能や作業中に発生したエラーについて質問すると、他のエンジニアから回答を得られます。

teratail.com

まぁこの話はいいとして、PHPが入れ終わりました。
次はnginxを入れましょう。
またどうでもいい話ですが、このnginx、最初なんて呼ぶか分からず自分の中でンギンクスと呼んでいました。
まさかエンジンＸなんてかっこいい呼び方に見えないですよね。

nginxはそのままyumの標準リポジトリで入れちゃいます。
勿論最新の物の方がいいのですが、herokuに上げる際にある程度最新の物に差しかわるので、表示を見る分にはverをあまり気にする必要が無いからです。

とりあえず一通りの設定を終えて自サーバーにアクセスした所、案の定見えない。
こういう時はlogを見るのが一番。

“location” directive is not allowed here in /etc/nginx/conf.d/default.conf:1

vagrantで共有フォルダを使っていた場合、良くあるエラー。
いつもこのエラーを解消する為に四苦八苦していた様な気がする。

おしい・・・のか？
まだファイルが読み取れていないようです。
ここでいつも詰まるのですが、ファイアーウィールなどをオフにしても見れない・・・。
何だ、何が悪いんだ→ファイルのパスが間違っていました。

とりあえず、PHPとnginxの連携だけは出来ました。
このまま順調に行けばいいんですが、絶対postgresSQLのインストールで詰まります。
詰まります・・・。

投稿 Laravelが動く環境を整える2 は ゴロ寝 に最初に表示されました。