Laravelのログイン機能を実装しようとして環境をぶっ壊した

いつもの続きでLaravel環境でWebアプリを作っていこうとして、やらかしてしまったお話。

環境整備

Basic認証設定

まだ公開できるサービスではなく、フルオープンにしておくのはちょっと恥ずかしいため、一応認証設定をかけておこうと考えた。

セキュリティ目的ではないため、簡単に掛けられるBasic認証を使うことにした。

# Basic認証パスワード生成
htpasswd -c public/.htpasswd ユーザ

# ドキュメントルート配下にBasic認証をかける
echo -e '\nAuthType Basic\nAuthName "Input your ID and Password."\nAuthUserFile /opt/bitnami/apps/april/public/.htpasswd\nrequire valid-user' >> public/.htaccess

# git diffに出したくないが、htaccess自体はgit管理したいため暫定対応
git update-index --assume-unchanged public/.htaccess

コマンドのエイリアス設定

自分がサーバ上で良く使うかなと思うエイリアスをとりあえず設定しておいた。

vim ~/.bash_aliases

# git
alias gst='git status'
alias gb='git branch'
alias gbv='gb -vv'
alias gl='git log'
alias gls='gl --stat'
alias glf='gl --name-only'
alias gd='git diff -b'
alias gdc='gd --cached'
alias gg='git grep'
alias ggl='gg -l'
alias gsh='git show -b'

# common
alias bashrc-reload='. ~/.bashrc'
alias aliases-change='vim ~/.bash_aliases && bashrc-reload'
alias v='vim -R'

# project
alias cdp='cd /opt/bitnami/apps/april/'
alias c='php artisan tinker'

Laravelの基本設定

Laravel 入門したばかりのデザイナーが、ページ作って表示させたり、基本的な機能を使ったこととか備忘録。 | Go-Nextブログ

に沿ってタイムゾーンと言語設定を行った。

ログイン機能の実装

Laravel6.x以降でログイン機能をインストールする方法 – console dot log

によると、Laravelには簡単に実装できるログイン機能？があるとのことだったので、試してみることにした。ちなみに今回はReactを使ってみることにした。

記載通りのコマンドを流してみる。そのコマンド実行時にサジェストされたコマンドもついでに実行。

composer require laravel/ui
php artisan ui react --auth
sudo apt install npm
npm install

ここまではなんとか。これ以降地獄が始まった……。

npm run production

→エラー。

sh: 1: cross-env: not found

herokuにデプロイしたらある日突然sh: 1: cross-env: not foundエラーが出て調べて出てくる対処方ではどうにもならなかった時の対処法 - Qiita

を参考に再実行。 →今度はnodeコマンドが無いと言われた。

sh: 1: node: not found

エラーメッセージ内かどこかにそれっぽいコマンドがあったので実行してインストール。

sudo apt install nodejs-legacy

その後、npm run productionを再実行しエラー。

module.js:328
    throw err;

なんかのパッケージが足りてないらしいので、npm-install-missingコマンドを使ってインストールすることに。

sudo npm install -g npm-install-missing
npm-install-missing

→npm-install-missing自体がエラー。

/usr/local/lib/node_modules/npm-install-missing/node_modules/async/dist/async.js:52
    function apply(fn, ...args) {

どこかから拾ってきた以下のコマンドを適当に流し、npm-install-missingを再実行するがエラーのまま。

npm install --save-dev laravel-mix browser-sync-webpack-plugin

ここでnpm-install-missingを使うのはあきらめて、cross-envを直接入れることにした。

sudo npm -g install cross-env cross-spawn

→これ自体は普通に成功。その後、npm run productionを再実行したがエラー。

/usr/local/lib/node_modules/cross-env/src/index.js:1
(function (exports, require, module, __filename, __dirname) { const {spawn} = require('cross-spawn')
                                                                    ^

SyntaxError: Unexpected token {

また拾ってきた以下のコマンドを流した。

sudo npm cache clean -f
sudo npm install -g n
sudo n stable
rm -rf node_modules && npm cache clean --force && npm install

→再実行してもエラー。reactをインストールしろと言われる。

npm install --save react react-dom

→再実行したがエラー……。よくわからなくなってきたので今日はもうやめることにした。

感想

ここから立て直せる未来が想像できないし、環境をぶっ壊してしまった感が否めない……。

ReactではなくVueを選べばよかったのか。はたまた、npmをよく知りもしないで拾い物コマンドを叩きまくったことがいけなかったのか。とにかく後悔やら反省する点が多々思い当たる。

とりあえずこのままだとどうしようもないため、最悪インスタンス自体を作り直してリトライすることも検討中である。

参考

Laravel 入門したばかりのデザイナーが、ページ作って表示させたり、基本的な機能を使ったこととか備忘録。 | Go-Nextブログ

Laravel6.x以降でログイン機能をインストールする方法 – console dot log

herokuにデプロイしたらある日突然sh: 1: cross-env: not foundエラーが出て調べて出てくる対処方ではどうにもならなかった時の対処法 - Qiita

Sudden npm error

node.jsで足りないmoduleをインストールするコマンドをインストールしてみる - 文系プログラマー

Laravel Mixを使って簡単にフロントエンド開発環境を構築する方法 | Will Style Inc.｜神戸にあるウェブ制作会社

node.js - cross-env / dist / index.js:42予期しないトークン} - ITツールウェブ

ねうねう技術らくがき日記

技術的なメモとか何か