Laravelのテンプレート(blade)とVue
これらを組み合わせてフロントエンドを作るときに注意することの備忘
vueを使ったhtmlやscriptを記述をする場合はかならずvueファイルを作成すること
どちらもhtmlを書けるので忘れてしまいがち。
（当たり前とか言わないでください。。。）
最初bladeの方にvueを使ったscriptを書いてて動きませんでした。。。 一部動くものがあったので気づかず、、、 （そもそもvueをビルドして使うものだとも知らなかった）
逆にvueにphpを混ぜることも出来ないですよ（多分）
vueにphpからの値がほしければ、blade側のjavascriptでグローバル変数的なものを作るか、vueのpropsで受け渡しするのが良いのかな。
自宅のサーバ公開
勉強がてらlaravelで作ったwebアプリを外部に公開するため、AWSのアカウント作って遊んでみようと思ったものの、なぜか支払用カードの認証が通らずAWSが使えない。。
とりあえず遊ぶだけなのでサーバは自宅内に置いて、外のネットワーク（WAN）からアクセスできるようにする。
設定としてはポートフォワーディング（このポートでアクセスが来たら、あのIPに接続する、的な設定）を利用する。
環境メモ
- 自宅のモデム型番確認
→HUMAX HG100R-02JG - 自宅マシン
→ローカルipアドレスは192.168.0.11。モデムから払い出されたIPを素直に使ってる状態。 - webサーバ
→自宅マシンの中に、http,httpsを受けるサーバ(dockerコンテナ）が起動している。
自宅マシンはモデム経由でWANにアクセスできる状態になっているものとする。
モデムの設定変更
ブラウザでモデム(192.168.0.1)にアクセス。
アカウントは本体に記載されているようなのでそれを参照。
ログイン直後の画面。
WAN IP アドレスが外からアクセスするためのIPアドレスなので覚えておく。
右下のネットワークも詳細設定へ。
ポートフォワーディングを利用する。
画面左の 詳細設定→フォワーディング
これに以下を設定。 詳細設定→フォワーディング を選択して以下を設定。
HTTPの設定例
| 項目 | 設定値 |
|---|---|
| 説明 | 任意 |
| プロトコル | 両方 |
| アプリケーションとポート | ユーザ定義（今回はHTTPでも良い気はする） |
| LAN側 | LAN内のマシンのIPアドレス |
| LAN側ポート | 80～80 |
| WAN側 | デフォルト(0.0.0.0) |
| WAN側ポート | 80～80 |
設定後、グレーアウトしている有効ボタンを押して緑色にする。
同様にポート443(HTTPS)を追加する。追加ボタン押下後、ポートを443として上記と同じ手順。
その後、適用。
WAN側からアクセス
ブラウザでWAN IP アドレスにアクセスして、webサーバが見られればOK。
Laravelでログイン機能
Laravelのコマンド（artisan）コマンドでテンプレ的なログイン機能が実装できるらしいです。
Laravel5以前では
artisan make:auth
コマンドで作成できたらしいが、違うやり方になっている様子。
laravel/uiのインストール
laravel/uiはフロントエンド用のライブラリ・フレームワークをlaravelで使えるようにまとめたもののようです。
たぶんjavascript系のフレームワークを使うためにごにょごにょしてるんだと思います。
#Laravel6.x 公式ではこちらに変わってました。 composer require laravel/ui:^1.0 --dev #laravel7の場合 composer require laravel/ui:^2.4 #laravel8の場合 composer require laravel/ui
ログイン機能追加処理の実施。
php artisan ui vue –auth
フロントエンドにvueを使ってログイン機能を作ります。
これを実行するとフロントエンドの処理、バックエンドの処理がいろいろ追加されるみたいです。
web.phpとかapp.blade.phpとかの中身が変わったぽいのは見ましたが、おそらく他にもいっぱい追加されているます。
また、database/migrationsあたりにDB操作用のファイルが作られますので、これを実行します。
php artisan migrate
フロントエンドのビルド
node/npmが必要らしいです。
npm install
で、フロントエンドをビルドします。上記でフロントエンドにvueを選択しているので、下記コマンドでビルドが行われているはず。
npm run dev
ビルドに関して少し調べました。 webpackまわり（ソースをまとめるため）の処理のようで。
確認
右上に「ROGIN」とか「REGISTER」が出ました。
G検定の勉強方法と試験の所感
一ヶ月ほど前ですが、G検定2021#2に合格しました。
他に受けようと思っている人もいるかもしれないので参考までに勉強法方や所感を。
G検定の意義については公式をどうぞ。 www.jdla.org
資格の難易度のレベル感としては、IT技術者にITパスポート、機械学習エンジニアにG検定、くらいの感じだと思います。 G検定に受かったから何ができると言うこともないですが、機械学習のキャッチアップしているということくらいは言えるかと。
前提（この文章を書いている人の情報）
- 勉強・受験時点で無職
→時間はいっぱいあった - 前職はSE兼PG
→公式テキスト「社会実装に向けて」の章の内容は何となくわかってる - 12年前に理系大学に通ってた
→線形代数、微分、確率チョットワカル(簡単なルールを暗記しているレベル)
勉強内容
勉強時間は約40時間(試験2週間前に勉強開始)
公式テキスト1周目
公式テキストを1回読みました。読了まで10時間。 版によって内容が違うらしいので、最新のを使いたいです。
別テキスト1周目
風の噂で、実際のテストの内容と公式テキストの内容が違うという話を聞いていたので、別のテキストも1回読んでみました。 こちらも読了まで約10時間。
公式テキスト2周目
で、改めて公式テキストを一通り読みました。約10時間。
問題集
テスト対策に黒本とやらをやりました。
章ごとに分かれているので、各章ごとに通しで満点とれるまで繰り返し。
その際にOneNoteで勉強用ノート作りました。OneNoteには単語とその解説を書き写していきました。OneNote内で既出の単語が出てきたらOneNote内でリンクを貼ったりもしてました。
これは本番用のカンペとしても使います。
ここまでで約8時間。
最後の2時間くらいで仕上げ問題（本番に近い形式の問題）を実施しました。9割ほど正解だったので、勉強を終了して本番に臨みました。
その他
G検定で微分が出ると聞いていたので、ヨビノリたくみさんの動画で予習しました。
テスト所感
テスト形式
webブラウザで受験します。
一問一答形式。(問題集は大問1つに対して複数設問がある形式なのでちょっと注意。)
120分で約200問。
めちゃくちゃ難しい問題があって、それに構ってると時間が足りなくなる、みたいな意地悪は無かったです。
テスト内容
体感7割ほど公式テキストの内容から出題されますが、前評判どおり、公式テキストで触れられない内容があったような気がしないでもないです。
ちなみに歴史的な（XXXX年に誰々が何を言った、みたいな）問題はそんなに無かった印象。
まぁこんな問題は出題されたとしてもググればすぐわかるので最初から気にしなくて良いのかも。
ディープラーニングの手法では、モデルの名前と、モデルの特徴と、使われる手法（学習に使われるアルゴリズム）と、その手法が生まれた背景を体系的に整理して覚えられればいけそうな気がしています。
ぶっちゃけ、公式テキストとか見てもモデルと手法の判別が難しいです。私の読解力の問題が多分にしてあると思いますが。
なお、モデルと手法を分けて考える必要があるという認識が正しい認識なのかどうか不明なため、この文章自体が正しい説明をしている自信はありません。
計算問題は、行列、微分ともに高校数学で最初に習ったレベル感じゃないでしょうか。 難しいこと考えずに計算ルールを覚えて、それに当てはめておけば良いと思います。
時間
時間が無いので、わからない問題があったら、後で見直すためのチェックをして（チェックする機能があります）どんどん次に進んでいくのがいいと思います。
ググるのは基本的に全部回答が終わった後で良いかと。
私は15分ほど時間が余って、以後自分で作ったOneNoteを調べたり、ググったりして回答を補完していきました。
結果
8割強の得点率で合格したんですが、すでに内容をあんまり覚えていません。 合格したら合格者専用のslackに招待されるので、それに入れるのが主な特典かしら。
Laradock環境のhttps化
https通信をするのは暗号化したかったからです。 httpのままだと情報が盗聴されたりするだけでなく、SEOで不利になったり、ブラウザ（javascript）からカメラやマイクにアクセスできなかったり面倒事が多いです。 もうでフォルトでhttpsでもいいのでは？
今回は個人的に遊んでるだけなので認証局にSSL証明書は登録しないけど。 最近はLet’s Encryptみたいな無償の認証局があったりするので、気が向いたらやるかも。
Https化
Laradock\nginx\sites\default.conf の以下のコメントを解除する
# For https # listen 443 ssl default_server; # listen [::]:443 ssl default_server ipv6only=on; # ssl_certificate /etc/nginx/ssl/default.crt; # ssl_certificate_key /etc/nginx/ssl/default.key;
httpをhttpsに転送する
Laradock\nginx\sites\default.conf に以下を追加する
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
return 301 https://$host$request_uri;
}
Listen 80 ~~の2行は既存の行があったらコメントアウトしておく
設定したらnginxの再起動
Laradockのダウンロード 、Laravel起動
Laradockのダウンロード。
使用するOSはubuntu1.8。
git、dockerはインストール済み。
gitからlaradock取得
(ホスト側) cd 任意のフォルダ git clone https://github.com/Laradock/laradock.git
.env(ホスト側の環境変数設定ファイル)の作成
（ホスト側） cd laradock mkdkr ../app cp .env.example .env vi .env #コンテナ側でcreate-projectを作成したときのhost側の反映場所 APP_CODE_PATH_HOST=../app PHP_VERSION=7.3 MYSQL_VERSION=5.7 #コンパイル時になんかエラー出るから・・ WORKSPACE_INSTALL_PYTHON=true #コンパイル時になんかエラー出るから・・ WORKSPACE_INSTALL_LIBPNG=true
起動。
db とwebサーバ立ち上げ。初回のコンテナ作成に時間がかかる模様。
（ホスト側） docker-compose up -d nginx mysql phpmyadmin
コンテナにlaradock ユーザで入る
（ホスト側） docker-compose exec --user=laradock workspace bash
Laravelでプロジェクト作成(コンテナ側) してコンテナから出る
（コンテナ側） composer create-project laravel/laravel /var/www/app --prefer-dist "6.*" exit
↑これの実行後、APP_CODE_PATH_HOST（ホスト側）と/var/www/app(コンテナ側)のファイルが同期してるか確認 。
Webサーバ設定
git clone で取得したnginxの設定ファイルからルート変更。
.envのAPP_CODE_PATH_HOSTの場所をみるようにする。
（ホスト側） vi laradock/nginx/sites/default.info root /var/www/app/public;
動作確認
ブラウザで自分自身(localhostとか)にアクセスして以下画面が出ればok
Laradockを使ってみる
10年近く前にLAPP環境（物理）を利用して以降WEB系の知識が止まっているので、とりあえず手を動かしてみたくなった。
php系の環境を用意しようとしたとき、laradockを使った構築が簡単そうに見えたのでこれを選択。
laradockはdockerで簡単にlarabelの動作環境をつくるための物らしい。
実態はPHPの何でもごった煮環境の様子。
ミドルウェアとかもいろいろ選んで構築できるとのこと。
ということは、いろいろテスト環境とかお試しには気軽に使えるかもしれないけれど、本番環境につかうには余計なものが多すぎてしまいそうな予感。 えいや、で使ってみる分にはいいかも。
あんまり細かいことは分からないので、Nginx + php-fpm + mysql の構成を意識して使ってみる
|
Nginx |
webサーバ。 |
|
php-fpm |
|
|
db |
MEMO:
php-fpmを導入するとサーバ負荷の低下や動作速度の向上が期待できるらしいので、おそらくキャッシュとかリソースの使い方をよろしくやってくれるんだと思う。
ちなみにwebサーバにApacheを利用すると、phpの実行モジュールが組み込める(webサーバかつappサーバ的な感じにできる) ため、LAPPで組んでたときは意識しなかった。
