N_OR’s diary

無職が何か言ってる

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)からアクセスできるようにする。

環境メモ

  • 自宅のモデム型番確認
     →HUMAX HG100R-02JG
  • 自宅マシン
     →ローカルipアドレスは192.168.0.11。モデムから払い出されたIPを素直に使ってる状態。
  • webサーバ
     →自宅マシンの中に、http,httpsを受けるサーバ(dockerコンテナ)が起動している。

自宅マシンはもで無経由でWANにアクセスできる状態になっているものとする。

モデムの設定変更

ブラウザでモデム(192.168.0.1)にアクセス。 f:id:N_OR:20210914151459p:plain

アカウントは本体に記載されているようなのでそれを参照。
ログイン直後の画面。
WAN IP アドレスが外からアクセスするためのIPアドレスなので覚えておく。
右下のネットワークも詳細設定へ。 f:id:N_OR:20210914151716p:plain

ポートフォワーディングを利用する。 画面左の 詳細設定→フォワーディング f:id:N_OR:20210914152040p:plain

これに以下を設定。 詳細設定→フォワーディング を選択して以下を設定。

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が必要らしいです。 最近のjavascriptってビルドが必要なのね。

npm install 

で、フロントエンドをビルドします。上記でフロントエンドにvueを選択しているので、下記コマンドではvueのビルドが行われているはず。

npm run dev 

確認

右上に「ROGIN」とか「REGISTER」が出ました。

f:id:N_OR:20210913002637p:plain

G検定の勉強方法と試験の所感

一ヶ月ほど前ですが、G検定2021#2に合格しました。

他に受けようと思っている人もいるかもしれないので参考までに所感を。

G検定の意義については公式をどうぞ。 www.jdla.org

受かったから何ができると言うこともないですが、機械学習のキャッチアップしているという古都くらいは言えるかと。。

前提(この文章を書いている人の情報)

  • 勉強・受験時点で無職
     →時間はいっぱいあった
  • 前職はSE兼PG
     →公式テキスト「社会実装に向けて」の章の内容は何となくわかってる
  • 12年前に理系大学に通ってた
     →線形代数微分、確率チョットワカル(簡単なルールを暗記しているレベル)

勉強内容

勉強時間は約40時間(試験2週間前に勉強開始)

公式テキスト1週目

公式テキストを1回読みました。読了まで10時間。 版によって内容が違うらしいので、最新のを使いたいです。

別テキスト1週目

風の噂で、実際のテストの内容と公式テキストの内容が違うという話を聞いていたので、別のテキストも1回読んでみました。 こちらも読了まで約10時間。

公式テキスト2週目

で、改めて公式テキストを一通り読みました。約10時間。

問題集

テスト対策に黒本とやらをやりました。

章ごとに分かれているので、各章ごとに通しで満点とれるまで繰り返し。
その際にOneNoteで勉強用ノート作りました。OneNoteには単語とその解説を書き写していきました。OneNote内で既出の単語が出てきたらOneNote内でリンクを貼ったりもしてました。 これは本番用のカンペとしても使います。
ここまでで約8時間。

最後の2時間くらいで仕上げ問題を実施しました。9割ほど正解だったので、勉強を終了して本番に臨みました。

その他

G検定で微分が出ると聞いていたので、ヨビノリたくみさんの動画で予習しました。


www.youtube.com


www.youtube.com

テスト所感

テスト形式

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  f:id:N_OR:20210910000852j:plain

Laradockを使ってみる

10年近く前にLAPP環境(物理)を利用して以降WEB系の知識が止まっているので、とりあえず手を動かしてみたくなった。

 

php系の環境を用意しようとしたとき、laradockを使った構築が簡単そうに見えたのでこれを選択。

 

http://laradock.io/ 

 

laradockはdockerで簡単にlarabelの動作環境をつくるための物らしい。

実態はPHPの何でもごった煮環境の様子。 

ミドルウェアとかもいろいろ選んで構築できるとのこと。

 

ということは、いろいろテスト環境とかお試しには気軽に使えるかもしれないけれど、本番環境につかうには余計なものが多すぎてしまいそうな予感。 えいや、で使ってみる分にはいいかも。

 

あんまり細かいことは分からないので、Nginx + php-fpm + mysql の構成を意識して使ってみる

 

Nginx 

webサーバ。 

php-fpm 

phpの実行エンジン?appサーバ扱い?phpcgiとして動かすために必要 

mysql 

db 

 

MEMO: 

php-fpmを導入するとサーバ負荷の低下や動作速度の向上が期待できるらしいので、おそらくキャッシュとかリソースの使い方をよろしくやってくれるんだと思う。 

ちなみにwebサーバにApacheを利用すると、phpの実行モジュールが組み込める(webサーバかつappサーバ的な感じにできる) ため、LAPPで組んでたときは意識しなかった。