転職したらスマレジだった件

スマレジのエンジニアやまてのテックブログです。マジレス大歓迎です。

トップ > はじめてのWebアプリ開発 > ローカル環境で起動させる手順 - はじめてのWebアプリ開発を振り返る Part1

ローカル環境で起動させる手順 - はじめてのWebアプリ開発を振り返る Part1

はじめてのWebアプリ開発 エンジニア転職 学習記録

こんにちは！

スマレジ・テックファームのWebエンジニアやまてと申します。

はじめに

初めてのWebアプリを公開してちょうど１年くらいが経ちました。（現在は公開停止しています）


今回は、Web業界実務未経験での転職活動用にポートフォリオの一つとして開発したWebアプリについて、ローカル環境で起動させる手順をまとめたいと思います。

絵本の読み聞かせの記録・管理を、家族と共有できる Web アプリケーションです。

github.com

ちなみに、バックエンドの学習期間が2020年8月〜で、アプリの開発期間は2021年2月〜7月です。


記事を書く目的

今回の記事を書く目的としては、以下のとおりです。

自身の学習の振り返りのため

作成当時、独学なのでフィードバックなし、完成させることを最優先にしたこともあり、自分が作成したWebアプリであるにもかかわらず、技術的な理解が浅い部分があることが課題としてあります。

スマレジの面接のときに、Webアプリの出来については褒めていただいたものの、Webアプリについての技術的質問で「いいね機能について説明してみてください。」というような理解を問う質問に対しては、全く上手く答えられず、

「口頭で説明できるということも仕事では必要なシーンがありますので、その点は今後意識していくといいと思います。」

というアドバイスをいただきました。

「口頭で説明できる」ということは「理解している」状態と言えそうなので、振り返ることで「口頭で説明できる」レベルになることを目指します。


Webアプリに今後も機能追加などをすることで、学習の材料にする準備のため

また、振り返りに加え、機能追加や、今学習しているセキュリティの観点でチェックしてみたり、当時はごく一部しか書いていないテストコードを書いてみるなど、アウトプットの場として活用したいと考えています。


見ていただく方にとっての参考になるよう共有したいため

現在、Webへの公開は停止していますので、動いているアプリを見ていただくところはWeb上にはないです。

ただ、これから異業種からWebエンジニアへの転職を目指されている方などで興味を持っていただいた方には、アプリが動いているところも気軽に見ていただきたいという思いがありました。

そのため、ローカルでアプリを開くまでの手順を整理しようと思いました。


INDEX



前提

Git と Docker を使用します。


実行環境

$ git --version
git version 2.28.0

$ docker --version
Docker version 20.10.14, build a224086

$ docker compose version
Docker Compose version v2.4.1



1. コマンド実行

Dockerアプリが起動していることを確認し、ターミナルを開き、任意のディレクトリ（Document ディレクトリ以下など）で、以下のコマンドを実行します。（下記の５行をまとめてコピペで実行しても、１行ずつ実行しても構いません）

git clone https://github.com/ryamate/yonde-web-app.git
cd yonde-web-app
make init
docker compose exec web npm install
docker compose exec web npm run dev

ブラウザで、下記にアクセスすると、トップページが開きます。

http://localhost/

絵本の検索や、登録など、機能を試していただけますと幸いです。

※ Googleアカウントでのユーザー登録・ログイン機能については、Google側の設定とGoogleから発行される「クライアント ID」と「クライアント シークレット」を .env ファイルに設定しないと機能しません。



2. 実行したコマンドの説明

「1. コマンド実行」で実行したコマンドの説明です。

GitHubからのクローン

以下のコマンドを実行し、GitHubからクローンします。

$ git clone https://github.com/ryamate/yonde-web-app.git

github.com


ディレクトリの移動

以下のコマンドを実行し、クローンしたディレクトリの階層に移動します。

$ cd yonde-web-app


Dockerの起動、ライブラリのインストール など

下記のmakeコマンドを実行し、Dockerの起動などを行います。

$ make init

make コマンドについては、下記の記事をもとにDockerを使ったLaravel開発環境を構築しており、作者の方が用意してくださっている Makefile から実行しています。

docker compose コマンドは入力するには長く、プロジェクト毎にエイリアス設定するのはとても面倒です。 Makefileを用意することで、短いコマンドでコマンドが実行できるようになります。

qiita.com

github.com


make init と入力するだけで、上記の７つのコマンドを実行してくれています。

# Dockerの起動
$ docker-compose up -d --build

# appコンテナに必要なライブラリをインストール
$ docker-compose exec app composer install

# .env.example を ファイル名 .env でコピー
$ docker-compose exec app cp .env.example .env

# Laravel のアプリケーションキーの生成
$ docker-compose exec app php artisan key:generate

# シンボリックリンクの作成
$ docker-compose exec app php artisan storage:link

# Web サーバが書き込みエラーにならないようにアクセス権限を変更
$ docker-compose exec app chmod -R 777 storage bootstrap/cache

# データベースのマイグレーション
$ docker-compose exec app php artisan migrate:fresh --seed

docker-compose コマンドを使用していますが、Webアプリを作成してから１年経って、 docker compose のように、 dockerのサブコマンドとして取り込まれていますので、読み替えていただくようお願いします。

matsuand.github.io


npm での JavaScript の各種パッケージのインストール

Vue.jsなどのJavaScriptの各種パッケージをインストールします。

$ docker-compose exec web npm install

アプリではVue.jsなどを使用しているため、Vue.jsなどのJavaScriptの各種パッケージをインストールする必要があります。


JavaScriptのトランスパイル

開発用のビルドコマンドを実行します。

$ docker-compose exec web npm run dev

アプリのJavaScriptは、そのまま各ブラウザで動かすことができません。コマンドを実行することで、各ブラウザで動かせる形式に変換（トランスパイル）されます。



3. 開発ツールの確認

phpMyAdmin でのデータベースのテーブルの確認

起動時に作成されたデータベースのテーブルを確認できます。

ブラウザで、下記にアクセスするとページを開くことができます。

http://localhost:40080/

絵本についてのダミーデータも入れておきたいところ…

MailHog でのメール受信テストの確認

MailHogは、開発者向けの電子メールテストツールです。

https://github.com/mailhog/MailHog

ブラウザで、下記にアクセスするとページを開くことができます。

http://localhost:8025/

メール送信機能を使って実装した機能（本アプリでは、メール認証、家族招待の機能）のテストができます。



補足. ローカル環境からのアプリの削除

「1. コマンド実行」で作成されたファイルやデータを全て削除する場合は、以下のコマンドを実行します。

docker-compose down --rmi all --volumes --remove-orphans
cd ..
rm -rf yonde-web-app/

qiita.com


おわりに

今回の記事は以上です！

今後も「はじめてのWebアプリ開発を振り返る 」関連の記事を書いていこうと思います。

ありがとうございました。