vue-cli で作ったサイトを GitHub Pages にデプロイする

サーバー処理をしない静的サイトを公開するのには GitHub Pages が便利です。
クライアントで動く JavaScript は使えるので Vue.js で作ったサイトも公開できます。
Vue.js のプロジェクトは vue-cli から作るのがいいようなので Mac で vue-cli のインストールから GitHub Pages にデプロイするまでの手順です。

vue-cli のインストール

sudo npm install -g npm
sudo npm install -g @vue/cli
npm --version # 6.9.0
vue --version # 3.5.1

sudo npm install -g vue-cli でもインストールできるのですがバージョンが古く 2.9.6 でした。

プロジェクトの作成

vue create --default project-name

project-name ディレクトリが作成され git init された状態になります。
GitHub に空の project-name リポジトリを作成し push します。

cd project-name/
git remote add origin git@github.com:UserName/project-name.git
git push -u origin master

ビルド

GitHub Pages ではリポジトリの直下または docs ディレクトリを公開できます。
デフォルトだとビルド成果は dist ディレクトリに出力されるようになっているので vue.config.js を作成して設定を変更します。
※ vue-cli 2 だと config/index.js が予め存在していたのですがなくなっているので新規作成する。
また GitHub Pages の公開 URL に合わせて publicPath も変更します。

// vue.config.js
module.exports = {
    publicPath: '/project-name/',
    outputDir: 'docs'
}

ビルドコマンドで /docs を出力します。

npm run build

デプロイ

ビルドされて出来た docs ディレクトリを GitHub に push するだけです。
既に出力ディレクトリを変更しているので動作には影響しませんが意味合い的に .gitignore の /dist をコメントアウトまたは削除しておきます。

#/dist

Git でデプロイ。

git add ./
git commit -m "message"
git push

GitHub Pages の設定

GitHub 上でリポジトリの設定から Options にある GitHub Pages を有効にします。
[master branch /docs folder] を選択してください。
設定の項目に出てくる URL にアクセスできれば完成です。
※ CDN の反映に時間がかかるのかしばらくは 404 が表示されていました。

参考

Vue.js を vue-cli を使ってシンプルにはじめてみる
Vue CLI 3.0 で TypeScript な Vue.js プロジェクトをつくってみる
Vue CLI 3でsrcパスの変更方法


カテゴリー: JavaScript | タグ: , | コメントする

Gist をクローンする際に The destination already exists エラー

Gist を GitHub Desktop アプリでクローンしようとすると下記のようなエラーが出ます。

Local path でディレクトリを指定してあげるとクローンできるようになります。
例) C:\User\SnowCait\Documents\GitHub → C:\User\SnowCait\Documents\GitHub\Example

参考
Unable to clone Gists in Desktop · Issue #2886 · desktop/desktop


カテゴリー: Git | タグ: , | コメントする

PHPer が思考を止めないために


言うまでもなくエンジニアにとって「考える」のは重要なことです。
ですが深く考えずにコードを書くことはよくあると思います。
コピペ、設計、インデント、等々。
それらは本当に正しいのでしょうか?思考停止してしまってはいないでしょうか?

時間は有限です。考えることが大事だからと言って意味のないことにまで考える時間を費やしていてはいくら時間があっても足りません。
本題に入る前にエンジニアが何に時間を費やすべきか少しばかり考えてみましょう。
例えばなぜインデントを揃えるのでしょうか?
エンジニアがそこで手を止めなくていいようにするためです。
読みにくいコードを頭の中で整理する時間はプログラミングにとって本質的ではない無駄な時間です。
そんなことに時間を使うよりは少しでも本質的なコードの設計を考える時間に費やした方がいいでしょう。


それでは本題です。
今回は PHP 特有の and/or という 論理演算子 について考えてみようと思います。
&&/|| の代わりに使える演算子です。もちろん普通に &&/|| も使えます。

数ある言語の中で and/or という演算子があるのは PHP だけです。
少なくとも主要言語である C, C++, C#, Java にはありません。
もしかしたら他の言語にはあるかもしれませんが少数派ではあるでしょう。
先に “普通に” と書いたのはそういう理由です。

それでは PHPer はどちらの演算子を使うべきでしょうか?
PHP フレームワークのコード規約やテンプレートエンジンを参考にしようと思いましたがあまり定義されていないようです。
FuelPHP: and/or
CodeIgniter: &&/or
PSR-2, Laravel, CakePHP, Symfony, WordPress, Smarty, Blade: 未定義

私は CodeIgniter と FuelPHP を使うことが多かったので and/or を使うのかーと思った記憶があります。
実際のコードは他言語との兼ね合いから &&/|| を使って書いていましたが。
Smarty では非エンジニアの方も触ることがあるので and/or が使われていることが多い印象です。


ところでこの2種類の演算子、本当に同じものなのでしょうか?
論理演算子のページにはこう書いてあります。

“and” および “or” 演算子が 2 種類あるのは、演算が行われる際の優先順位が 異なっているためです (演算子の優先順位 を参照ください)。

つまりどちらを選ぶかによってコードの実行順序が変わってきます。
具体的には $a = false || true; だと $a は true ですが $a = false or true; だと false になります。

PS C:\> php -r '$a = false || true; var_dump($a);'
bool(true)
PS C:\> php -r '$a = false or true; var_dump($a);'
bool(false)

このような代入、書くことありますよね。
今まで書いたコードでは正しく書けているでしょうか?
もしかしたら &&/|| 演算子を使っている方は自信を持って答えられるかもしれません。
では and/or を使っている方はどうでしょう?優先順位、意識していましたか?
少なくとも私は優先順位が違うことはこの記事を書くまで知りませんでした。


それではあなたのコードではどちらを選ぶべきでしょうか?
優先順位を考えると &&/|| の方がいいのでは?と思った方がいるかもしれません。
ですがテンプレートエンジンとして書くなら優先順位が求められるようなコードを書くことはないでしょうし and/or の方が非エンジニアの方にも分かりやすくていいかもしれません。
他言語を使っていた経験の多い方がチームでロジックコードを書いているなら &&/|| の方が手を止めずに済むかもしれません。
結局はケースバイケースでしかないのです。
思考を止めずにメリット/デメリットを比較して自分のコードに適切な方を選びましょう。


カテゴリー: 雑記 | タグ: | コメントする

Azure Function App で実行する PHP バージョンを指定する

Azure Function App で実行する PHP バージョンを指定するには通常は [アプリケーション設定] から [PHP のバージョン] を選ぶだけです。
しかし最新版を使いたいなど特定バージョンの php.exe を指定したい場合があると思います。

php.exe ダウンロード

https://windows.php.net/download
から使いたい php.exe をダウンロード。( VC15 x64 Thread Safe など)
zip のままで OK 。

Function App に適用

[プラットフォーム機能] から [高度なツール(Kudu)] を開く。
[Debug console] から [PowerShell] を選択。
D:\home\site\tools へ移動。
ダウンロードしておいた zip を [Drag here to upload and unzip] と書いてあるところへドラッグ&ドロップ。( Size のところらへん)

php.ini の設定

php.ini.production をコピーして php.ini を作成。

今回は CURL と OpenSSL が必要だったので以下を設定。

[PHP]
extension=curl
extension=openssl
 
[curl]
curl.cainfo="D:\Program Files\Git\etc\pki\ca-trust\extracted\openssl\ca-bundle.trust.crt"

以上で適用されます。

元に戻す

D:\home\site\tools 以下のファイルを削除すれば元の状態に戻ります。

確認

<?php
echo phpversion().PHP_EOL;

で実行。ログに出力されます。

参考

ちなみに今回はプラットフォーム側の php.exe パスが見つけられず 500 Internal Server Error が出ていたので以下を参考に対応しました。
using PHP functions no longer run #3134
Using a custom version of Python


カテゴリー: Windows Azure | タグ: , | コメントする

Laravel の php artisan serve で実行したサーバーのログファイル

php artisan serve で実行したサーバーのログは storage/logs ディレクトリに保存されています。

標準出力したければ以下を試すといいかもしれません。
Laravelのログを標準エラーに出力する


カテゴリー: Laravel | タグ: | コメントする