初WEBアプリ作成の備忘録

も つ み

未経験からWEB系エンジニアを目指そうと思い、3か月ほど勉強をしてきました。
まだ不完全なものですが、アプリの作成を行ったため、作成に参照したサイト等を備忘としてまとめておこうと思います。

はじめに

まずはじめに、Udemyでこちらのコースを受講しました。

HTTP、CSS、JS、PHP、Laravel、Git、Dockerなど、フロントエンドからバックエンドまで幅広く触れることができました。
このコースでLaravelを使用して作成したクイズ管理アプリを参考に、写真を一覧化できるアルバムアプリを作成しました。

作成したアプリを含めた、ポートフォリオはこちら。

オリジナルアプリの作成

環境構築

オンラインコースではすでにGitHubにアップロードされたアプリをダウンロードして作成したため、自分では環境構築していませんでした。
サイトを参照しながら進めていく必要があり、かなり苦労しました。

＜インストール＞
・xampp
・composer
・Laravel
上記3つのインストールはこちらを参照
※こちらも参照しました

・Docker

※DB接続エラーが出た場合は、Dockerコンテナ起動後に下記コマンドを実行し、DBにテーブルを追加するとエラーが解消されました

sail artisan migrate

・GitHub
参照したサイトを控えておくのを忘れてしまいましたが、こちらとほぼ同様の内容を進めました。
コミットのあとに、ブランチ名を下記コマンドで変更しています。

git branch -M main

パスワードを求められた際には、トークンを発行・入力したらうまく入れました。
（トークンの発行）
アイコン>Settings>Developer settings>Personal access tokens>Tokens(classic)

機能実装

こちらはオンラインコースで一通り学習していたため、内容を自分の作りたいものに変えていくことで作成しました。
オンラインコースで使用したGitHubはこちら。
ローカル環境での写真のアップロードはこちらを参考に実装しました。
また、オンラインコースとは言語変更の対応方法が変わっていたので、こちらを参考にしました。

ある程度すんなり進みましたが、Viteを使ってのJavaScriptとCSSがうまくインストールできず、思い通りに実装できない部分がありました。（今後の積み残し）
※UdemyのコースではビルドツールにLaravel Mixを使用していましたが、今回インストールしたLaravelではViteに置き換わっていたため、うまく対応ができませんでした

デプロイ

オンラインコースでは、PHPで作成したアプリのAWS EC2でのデプロイは行っていたものの、Laravelで作成したアプリのデプロイは行っていませんでした。
こちらもサイトを参照しながら手探りで進めていくこととなり、苦労しました。
こちらのサイトを参照して進めていきました。

※mysqlのインストールはこちらを参照しました。インストール後の作業はこちらも。

デプロイ後、ファイルのアップロードの上限を変更しました。
参照サイトはこちら。

AWS EC2を使用してデプロイしていたため、画像の保存先をS3に変更しようとしましたが、
エラーから抜け出せず、今回の作成では本番環境でのアップロードを断念しました。。（おそらくAmazon S3の権限設定周りのエラーっぽそう）
本番環境には手作業でDBへの登録と写真のアップロードを行いました。
※参照サイト
サイト1、サイト2、サイト3（エラー内容も含め記載があった）
S3の公開設定はこちらを参照しました

独自ドメインの取得・設定

こちらはオンラインコースの内容をそのまま行えばよく、すんなり完了しました。

おわりに

WEBアプリ作成の学習を始めて3か月ほどで実践的な演習ができたのはよかったです。
知識にインプットが浅いまま実践に進んでしまったので、基本的と思われる部分でエラーが発生し、それを調べて直して…という作業を繰り返すことになってしまいました。
Progateなどで基礎固めをしてから、今回積み残した部分や追加機能の実装を進めたいと思います。
また、検索上位にでてくるブログ記事を参照して作成しがちでしたが、まずは公式ドキュメントを見るべきなのではと思った次第です。。

以上、Web系アプリ開発初心者の独り言でした。

この記事が気に入ったらサポートをしてみませんか？