弊社で作成中のWebアプリ、モバイルアプリ用のボイラープレートを公開します。

公開した経緯

作ったは良いものの、実プロジェクトで使うかは微妙です。
まだまだ完成度は低いですが、完成せずに放置する可能性も出てきました。
個人の時間も使って作ったので、少しでも役立てたいと思い公開の許可を頂きました。

使用している主な技術

使用している主な技術はこんな感じです。

環境	言語	フレームワーク
Backend	PHP	Laravel
Frontend	Typescript	React, Redux
Native	Dart	Flutter, Provider

注意点

• LaravelやFlutterは初めて使ってます。
  • 未熟な部分も多々ありますので、優しく教えていただければ幸いです。
• 実プロジェクトでまだ利用してませんので、有用かは分かりません。
• ボイラープレートを良いことに雑な箇所もあります。。

主な特徴

• テスト、静的解析自動化 (Github Actions)
  • Backend -> PHPStan, PHP_CodeSniffer, PHPUnit
  • Frontend -> ESLint, Typescriptのビルド
  • Native -> Flutter format, Flutter test
• ステージング環境へのデプロイ自動化 (Github Actions)
  • Backend -> Heroku
  • Frontend -> Firebase Hosting
  • Native -> Firebase App Distribution
• ステージング環境は激安運用可能 (Freenom, CloudFlare)
• 多言語、タイムゾーンを考慮 (検証不十分です。特にタイムゾーン。)
• フロントエンドやモバイルとバックエンドの繋ぎ込みを極力共通化
  • API呼び出しのローディングやサーバーサイドのエラー反映も共通化

詳細

今後、各アプリの詳細や得られた知見を記事にできたらなと思います。

画面イメージ

ボイラープレートですので、あえて(?)シンプルです。

Webアプリ

モバイルアプリ

勉強のためにWebアプリをEC2にデプロイしてAPIを叩いたりしてたら、突然EC2に入れなくなった。

とりあえずまあいっかと放置していたら・・・・・・

ある日こんなメールがAWSから届いた

Hello,
We've received a report(s) that your AWS resource(s)
has been implicated in activity which resembles scanning remote hosts on the internet for security vulnerabilities. Activity of this nature is forbidden in the AWS Acceptable Use Policy (https://aws.amazon.com/aup/). We've included the original report below for your review.
Please take action to stop the reported activity and reply directly to this email with details of the corrective actions you have taken. If you do not consider the activity described in these reports to be abusive, please reply to this email with ?details of your use case.
If you're unaware of this activity, it's possible that your environment has been compromised by an external attacker, or a vulnerability is allowing your machine to be used in a way that it was not intended.

上記訳

こんにちは、
AWSリソースに関するレポートを受け取りました
インターネット上のリモートホストのセキュリティの脆弱性のスキャンに似たアクティビティに関係しています。 この種のアクティビティは、AWSの利用規定（https://aws.amazon.com/aup/）で禁止されています。 レビュー用に、以下の元のレポートを含めました。
報告された活動を停止するための措置を講じ、講じた是正措置の詳細をこの電子メールに直接返信してください。 これらのレポートに記載されている活動が悪用されていると思わない場合は、このメールにユースケースの詳細を添えて返信してください。
このアクティビティに気付いていない場合は、外部の攻撃者によって環境が侵害されているか、脆弱性により、意図しない方法でマシンが使用されている可能性があります。

つまり
「このEC2に報告が入ったで。なんかこのEC2で悪用しているんちゃうか？攻撃されているかもしれんがな。
とりあえずなにしたか急いで返信してくれや」

とのこと。

訳もわからずとりあえずEC2を一旦停止

そして、AWSに急ぎ以下の内容を返信
(日本語と英語を書いた。しかしたら日本語で対応してくれる可能性があるため）

こちら身に覚えがないため、一度インスタンスを停止いたしました。

報告されたアクティビティ：ポートスキャン
とのことですが、具体的な情報が欲しいです。

I'm sorry. The reply was delayed.
I don't remember this, so I stopped the instance once.

Reported activity: Port scan
However, I would like specific information.

そしたら以下の返信が帰ってきた

※（英語でめちゃくちゃ長文がきたので日本語に簡易的に訳したのを載せます）

このインスタンスは起動したら暴れる(目的は知らんがポートスキャンしてるので違反している)から終了しろってこと。
暴れる原因に心当たりがないなら誰かに悪用されている事が考えられ、それはあなたの責任なのでしっかりしてください。
こういった事象を防ぐために色々用意してるからちゃんと調べて使ってね。
で、このインスタンスを復活したいなら
このインスタンスはおそらく完全にクリーンには出来ないので同じものを別に0から作ってね。
よろしく

EC2に入って中のログをしらべたところ、、

知らないIPからの接続を大量に確認！！
中国からアクセスがあった模様
kthreaddiというアプリがめちゃくそCPUを食ってて一瞬で使用率が100%に
（ビットコインをマイニングするツールらしい）

結論＋対応策

勉強用のEC2だったのでまあまた立てれば良いと思い、インスタンスを終了しました。

対応策
セキュリティグループを絞る
ファイアウォールを入れて守る

ウイルスが入ってしまうともうEc2のCPUが暴れ続けるらしい

みなさんもお気をつけて！！では！！！

未経験27歳1年間のエンジニア生活を振り返る

みなさんどうもこんにちわ。山田です。
27歳、未経験から某スクールで学びWEB業界に転職し、1年が経とうとしているところです。

この1年間、本番環境への反映を失敗し、30サイトのメール文を手打ちで修正したり、クライアント様からテストが不十分だと暖かい(?)ご指摘をいただいたりしてきました。

早い話、たくさんやらかしてきました。←

とまぁ、大変な1年だった訳ですが、営業からweb系の企業に転職し、もっとこれを勉強しておけばよかったなぁと思うこともある訳です。

私にとっては時すでに遅しですが、これからエンジニアになる方の参考に、また私としても備忘録としてこの1年をまとめていこうと思います。

※間違った情報、質問などがあれば、コメントいただけますと幸いです。

未経験エンジニアの1日のスケジュールを公開

新人エンジニアの1日(受託,ベンチャー社員数25人半数リモート)

9:15~メール、業務の確認

9:30~業務開始

13:00~14:00 昼休み

14:00~18:30 業務

残業は30分ぐらいかな。でも全然しなくてもいいみんな帰る。

業務中はほぼ無言です。

• 業務内容
  • クライアントから依頼のあったシステムの作成をする。新人なので比較的簡単なパーツの実装を任されることが多い。
  • 1人日~5人日ぐらいの実装
  • 予約システムのログイン機能、検索や、情報のスクレイピングなど(動作テストも任されますが、これは企業によると思う)
  • 自社開発サイトの改修
  • 外部の方との連携

▼当然知っている的な雰囲気のこと

• Gitのターミナル操作
• ディレクトリやファイルの移動や構成(Linuxコマンド)
• 他の会社はftpソフトとか使うか分からないけどCyberduckやfileziilaなどを知っておけばOK
• ssh接続についてなど

▼入社して驚いたこと

• 全く知らない(実装方法もわからない)ことを普通にサッと頼まれたりするので、都度ググったりどうしてもわからない場合は質問をする(質問方法も調べた方がいい)
• オフィスは静かで、ひたすらにコードを書くもしくはググって調べるだけで会話はほぼない
• リモート可なのであったことない人が数人いる（チャットではやり取りする）
• 中途採用だからか、ベンチャーだからか分からないが、手取り足取り研修はない。(自分で勉強する)
• エンジニアの人は人としては優しい人が多い(質問もすれば答えてくれるけど、〇〇でググってみてとかそんな感じなことも汗)
• 分からなさすぎて不安になることがある
• 分からなさすぎてとても不安になることがある
• 分からなさすぎてとても不安になることがあるので、とても不安になる

毎月の仕事内容の変化と、失敗談など

入社1ヶ月目

• 担当業務

  • テスター
  • コードの勉強

• 困ったこと

  • サーバーに関する知識のなさによる開発環境構築の手間取り
  • 生のコードに関する知識や自分の実力のなさを遺憾なく発揮

感想

まず、入社してから環境の構築を行います。

Apatchのバーチャルホストの設定を行う訳ですが、webサーバ？バーチャルホスと?何ですかそれは？状態で何も全くわからない。

スクールではとにかくrailsで何かを作ることに注力しており、サーバー周りの知識がほぼ皆無でした。学んできたことはなんだったのかと、少し絶望しました。（この時はまだもっと絶望することを知らなかった）

• やっておけば良かったこと
  • サーバに関する知識は勉強し始めると終わりが見えませんが、基礎的な部分は学んでおく。自分が入社する企業がどんな環境で開発しているかなどを調べて、少しでも勉強していけば良いと思います。(例:dockerとかバーチャルホストとか)

入社2ヶ月目

• 担当業務

  • テスター
  • 社内で使っている日報ツールなどの改修

• 困ったこと

  • 案件に入ったが、ディレクトリの複雑さに驚愕。
  • Gitの操作に慣れておらず、訳も分からず git pull（※絶対にやめましょう）

感想

Gitの操作ミスで検証環境が全く見れなくなり、冷や汗ダラダラで先輩エンジニアに相談しました。Gitの操作もスクールで習ったはずですが、あまり理解ができていなかったようです。。。(そもそもgithubデスクトップ使っていたからターミナルからの操作は訳わかめ状態だった)

仕事内容としては、テスターの仕事が多く、あまりコードに触れることがない１ヶ月でした。(コード触りたかった！！)

• やっておけばよかったこと
  • Gitについての知識、ターミナルでのgit操作に慣れておくこと(超重要)

入社3ヶ月目

• 担当業務

  • テスター
  • 受託開発<-new

• 困ったこと

  • 初めての受託案件、他人(先輩様)が書いているコード半分が理解できず

初めてクライアントの案件を任せていただく(嬉)スクールではRailsに慣れていたが、laravelを実務レベルで初めて触る。そんなに大きな違和感はない。MVCモデルだし、根幹はやっぱり似ているように思う。

納期も長めに取ってもらって、結構ゆとりを持って機能の実装をしていた。あれ？俺ってできてるんじゃね？と思った。(後にgit操作をミスり、本番が見れないようになることを当時は知らなかった)

入社4ヶ月目

• 担当業務

  • テスター
  • 受託案件

• 困ったこと

  • まだまだlaravel(php)の知識が足りない

少し大きめの機能の改修を任された（10人日ほど）要件のみ渡され、DB設計から実装、テストまでを担当したが納期から少し遅れて納品。。。悔しかった。

ちなみに、gitで何回かやらかして時間ロスしたのもある。。。(先輩の時間も奪ってしまい反省)

入社5ヶ月目

• 担当業務

  • テスター
  • 受託開発
  • 自社サービスの開発<-new

• 困ったこと

  • DRYなど、基本的なことをできていなかった

もう受託開発にも慣れてきた。この月も別のクライアントの大きな改修を任せてもらった（12人日ほど)その改修と、先月の実装のチェックバックが溢れ、めためたに忙しい月だった。。

チェックバックを多くもらってしまいました。作って終わりではないことをこの月に学びましたとさ(まじで動作確認は大事だから、動作確認を絶対に怠ってはダメ。絶対にね。)

あと、自社開発のサービスにも少しだけ関わらせていただきました。

入社6ヶ月目

• 担当業務

  • テスター
  • 受託開発
  • 自社サービスの開発

• 困ったこと

  • 仕様に関してのコミュニケーションの難しさを痛感した

自分が担当しているクライアント様の機能追加などをメインに行なっておりました。大きな機能から小さな機能まで、一貫して一人で行うので、正直大変でした。機能が7割ほどできてから、私と上長に仕様の認識ズレがあり、大きく時間をロス。。。

エンジニアにもコミュニケーション力が必要だと言われる理由がわかりました。。。継続してサービスの開発に携われていた1ヶ月でした。

入社7ヶ月目

• 担当業務
  • テスター
  • 受託開発
  • 自社サービス改修

自分が担当しているクライアントの、今までで1番大きな改修を任されました。実装は工夫して先輩エンジニアの力も借り、納期より早めに本番に反映完了。

開発のスピードの上がってきました。(まだまだ遅いですが...)慣れもあって余裕も出てきたので、自宅でvueなどを勉強するゆとりが生まれました。

入社8ヶ月目

• 担当業務

  • テスター
  • 受託開発
  • 自社サービスの開発

• 困ったこと

  • git操作がまだまだ慣れない

大きい改修はなく、自社サービスや受託のこまごまとした修正をこなしていました。Gitにて再度やらかし、それほど大きなミスではなかったのですが、今までの自分の８ヶ月はなんだったんだと自己嫌悪に陥りました。

「なぜ俺はあんな無駄な時間を...」と少し思いました(ミッチー)

入社9ヶ月目

• 担当業務
  • テスター
  • 受託開発
  • 受託開発のgit管理　<-new
  • 自社サービスの開発
  • 自社サービスのサーバー構築(LAMP環境)　<-new

受託開発、自社サービスのいろいろな機能に顔を出して、学びながら実装してきました。先輩エンジニアが産休に入ったので、担当していた受託企業を引き継ぐことに(汗

ちなみにまだまだgitでやらかしているので、不安しかなかった汗。Git管理といっても、ほぼ自分しか触らない案件だったので、それほどの作業はありませんでした。

また新しくサービスを立ち上げるという話になりまして、私がそのサービスのサーバー構築から、ローンチまでの開発を任せていただきました。とはいっても、コードはほぼ出来上がったパッケージを流用しているので、作業自体は10人日ほどでした。

しかし、自分しか関わっていない自社サービスなので、任せていただいた時は嬉しかったです。

入社10ヶ月目

• 担当業務

  • テスター
  • 受託開発
  • 受託開発のgit管理
  • 自社サービスの開発

• 困ったこと

  • サーバー関係のエラーが全く解決できない(サーバー負荷なども解決できるようになりたい)

大きな変化はなく、だいぶ仕事にも慣れてきました。先輩は非常に頼りになるし、聞いたらなんでも教えてくれました。

だいたいlaravelで実装したいことはそれほど悩むことはなくなりましたが、サーバーのエラーなど深い部分でのエラーはまだまだ解決するのに時間がかかりました。ここが課題だと思いました。

というか、先輩エンジニアに聞いたら「これはまだわからんわw」と言われましたが、その領域までいきたいと思いました。

入社11ヶ月目

• 担当業務

  • テスター
  • 受託開発
  • 受託開発のgit管理
  • 自社サービスの開発 &　ローンチ
  • 新人のメンター<-new

• 困ったこと

  • 先輩が退職し、払拭できない不安の渦に取り込まれる

私の1年先輩の方が会社を退社されました。その先輩になんでも聞いていたので、非常に寂しいです。その先輩の業務を引き継ぐことになったので、自社サービスのgit管理が増えました。外部の方のコードを本番に反映したり、開発環境を整えたりする仕事です。

コードを書く以外の部分(外部との連携やサーバー関係やgit関係など)での業務も増え、さらに先輩が行なってい業務も降ってくるので忙しい1ヶ月でした。。。

先輩の業務を引き継ぎ、少し忙しくなり変わったことは「絶対に自分ではわからないと思ったらすぐに聞く」ようになりました。それがいいのか悪いのかはわかりませんが笑

この月から「新入社員のメンター」も担当するようになりました。とはいっても質問に答えるのみですが、、未経験の方のコードを見ることは自分にとっても勉強になるので、これから楽しみです。

まとめ

とまぁ、こんな感じで、忙しい1年がようやく終わりそうです。正直、先輩が辞めたことで、これからが非常に怖いです。恐怖です。自分も成長して、担当するサービスも使いやすくなるように頑張ります。

この記事を書いていて思うのが、やってきたことの棚卸しは必要だということ。自分が何をやってきて、何を学んで、何ができるようになったか。目標はどこか。など、定期的に振り返ることが大事かなと思いました。

去年1年で困ったこと

• Gitの操作で検証環境などをぶち壊す
• サーバーの知識のなさでエラー解決できない
• 本番に反映した後にミスが発覚し、残業しながら改修(これが一番きつかった)
• 仕様の確認コミュニケーションスキルの不足により、実装の二度手間が発生
• こんなん絶対実装できへんやん...と思ってしまいモチベ低下(だいたい先輩に聞いたら実装できる)

今年1年でやりたいこと

• Vue.jsを使った実装
• Dockerを使って開発環境を作成する
• circleCIで自動テストツール作成
• AWS ASS取得　AWSに自分のサービスをデプロイ
• 自分が関わっている会社のサービスをより使いやすいように意見も言う
• 自分より年次が若いメンバーを育成、チームで働く

などなど、まだまだやりたいことは尽きません、、、

正直dockerやcircleCIなどは、自分で勉強するしかありません。実務では使ってないから。実務レベルで使ってみたいものです。また、チームでの開発にも非常に興味を持ちました。今はただ単に言われた機能を実装するだけなので、何人かで議論しながら新しい技術もキャッチアップして開発していくような環境への憧れを抱いています。

では今日はこの辺で、さようなら〜

はじめに

この記事はプログラミング初学者による備忘録用の記事であり、また、少しでも他の初学者のお役に立てればと思い書いています。

今回はaxiosの使い方を練習する為に、laravel6、Vue.js2、axiosを使い外部APIランダムで人名を返してくれる無料WebApiであるRANDOM USER GENERATORのデータを取得後、ブラウザに表示してみました。

間違いなどがございましたら、ご指摘のほどよろしくお願い致します。

事前準備

axiosを使い取得したデータをlaravel側で表示する為に、ルーティングを作成後、新規コントローラー内でメソッドを定義、そしてbladeを作成します。

web.php

<?php
Route::get('axios', 'AxiosController@index');

:解説
axiosで取得したデータを扱う為にルーティングを新規作成します。

AxiosController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AxiosController extends Controller
{
    public function index()
    {
        return view('axios');
    }
}

:解説
今回は取得したデータを表示するだけなので、メソッドではviewの指定のみ記述しています。

axios.blade.php

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>axiosを学ぶ</title>
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>

<body>
    <div id="axios">
        <axios></axios>
    </div>
</body>
<script src="{{ mix('js/app.js') }}"></script>

</html>

:解説
本来なら、bladeの<head>などは切り分けてextendsすべきですが今回はまとめて書いています。

• axiosを扱う為に、Vue.jsを使用しているのでbladeで <link href="{{ mix('css/app.css') }}" rel="stylesheet">、<script src="{{ mix('js/app.js') }}"></script>と記述しトランスパイル後のapp.jsとapp.cssを読み込ませています。
• <div id="axios"> <axios></axios> </div>と記述し、vueコンポーネント(Axios.vue ※後ほど解説)を持ってきています。

axiosをVue.jsで利用する(GETメソッド)

今回は一番シンプルなGETメソッドを使いたいと思います。

GETメソッドは一番シンプルなメソッドでaxiosだけでなく外部から情報を取得する際の基本になるメソッドです。

では、
laravel側の事前準備はできたので、vue、axiosを使いAPIのデータを取得してみたいと思います。

1.resources/js/app.jsでVueコンポーネントをimportする

app.js

import './bootstrap'
import Vue from 'vue'
import Axios from './components/Axios'

const axios = new Vue({
  el:'#axios',
  components: {
    Axios,
  }
})

:解説

• elオプションを使うことで、bladeの<div id="axios"> </div>の中でVueコンポーネントを扱えるようにしています。

2.webpack.mix.jsでトランスパイルの設定を行う

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .version();//追記

:解説

• .version();を追記することで、トランスパイル時に付与されるIDを扱うようにしています。これで、ブラウザ側に古いjsのキャッシュが残っていてもトランスパイルした最新の情報をブラウザに渡せるようにしています。

少し詳しく解説...

サーバー側に新しいJavaScriptを配置したとしても、ブラウザのキャッシュに以前に読み込んだ同じサーバーのJavaScriptがキャッシュとして残っていると、ブラウザはキャッシュにある古い方のJavaScriptの情報を使ってしまいます。
その対策として、LaravelMixでは、JavaScriptのトランスパイル毎に、idを採番するようにします。idは、トランスパイルの都度mix関数により付与されます。

具体的には、webpack.mix.jsでmix関数により付与されたidを、追記したversionメソッドによって、idを採番するようにします。トランスパイルの都度毎回変わるidパラメーターがあることで、ブラウザはこれをキャッシュにある古いJavaScriptとは別のファイルとみなし、キャッシュを使わずにサーバーから新しいJavaScriptを読み込むようになります。

3.Vueコンポーネントの作成

Axios.vue

<template>
    <div class="style1">
        <h1>{{ message }}</h1>
        <p v-if="errored">サーバとの通信でエラーが発生しています</p>
        <p v-for="user in users">{{ user.name.title }} {{ user.name.last }}</p>
        <button
      class="btn-sm shadow-none border border-primary p-2"
      @click="clickData">
      <font size="3">axiosを使いデータを取得</font>
    </button>
    </div>
</template>

<script>
export default {
    data() {
        return {
           message: 'Axios',
            users: [],
            errored: false
        };
    },
methods: {
      clickData() {
axios.get('https://randomuser.me/api/',
            {
              params: {
                results: '5'
              }
            })
        .then(response => {this.users = response.data.results})
        .catch(error => {console.log(error)this.errored = true})
    },
    },
}
</script>

:解説

今回は、template内でボタンを作り、クリックされた時にaxiosを使いデータを取得するメソッドが実行されるようにしてみました。

• axiosの基本的な型は、axios.get(‘URL’)

GETの場合、オプションをつけることができます。

方法
1.直接URLにつける
axios.get('/user?ID=12345');

2.optionに指定する
今回は、ランダムにユーザー名を取得するAPIを使用している為、結果を表示する数をオプションで設定しています。
axios.get('https://randomuser.me/api/',
{
params: {
// ここにオプションを指定する
results: '5'
}
});


• axiosはPromiseとして値が返ってくるので.then.catchで処理できる

.then(response => {this.users = response.data.results})
.catch(error => {console.log(error)this.errored = true})

.then
axios.getでデータを取得後、.then(response => this.users = response.data.results)を繋げることで、data(){}の中にある値users:[]に取得した情報を格納することができます。今回、users: []といった空の配列を持つ値にデータを渡しています。
重要: this.users = responseのあとに.dataを続けてthis.users = response.dataにするとデータの中身だけを渡すことができます。今回はオプション付きです。

.catch
エラーをキャッチする為に、.catch()を記述します。これによりAPIリクエスト中に何かが失敗した場合知ることができます。

• axiosで取得したデータを配列に基づいてbladeで表示する

Axios.vue

<template>
    <div class="style1">
//略
        <p v-for="user in users">{{ user.name.title }} {{ user.name.last }}</p>
//略
    </div>
</template>

配列に基づいて、アイテムのリストを描画するために、v-forを使用しています。
v-forはuser in users の形式で特別な構文を要求し、users はソースデータの配列で、user は配列要素がその上で反復されているエイリアスです。
bladeでいう@foreach($articles as $article)のような役割を持っています。

users自体に配列としてデータが格納されている仕組みは、
data(){}の中にあるusers:[]という空の配列に、axiosで受け取ったjsonデータを.thenを利用して格納している為です(多分)

{{ user.name.title }} {{ user.name.last }}の箇所は、APIのサイトでどのようなデータを取得できるか確認してみてください。

4.表示結果

これで意図したようにブラウザ側で取得データを表示させることができました。
buttonを押すと別の名前が表示されます。

おわりに

今回、axiosを理解する為に色々と動かしてみましたが、結果としてlaravelやVue自体の理解も深まったので万々歳です。

参考文献

axios を利用したAPIの使用例 (Vue.js公式)
axios GitHub
RANDOM USER GENERATOR
テンプレート内でのコンポーネント名の形式 (Vue.js公式)

MySQLへログイン

ターミナルで以下を入力します。
mysql -u 'ユーザー名' -p

mysql -u root -p

その後、パスワードを聞かれるので、入力します。

パスワード入力後、ターミナル内がmysql>へ変わればログイン完了です。

データベースの作成

データベースの作成を行います。

以下のコマンドを入力します。

mysql> CREATE DATABASE tests CHARACTER SET utf8mb4;

上記のコマンドでtestsというデータベースが作成されます。

文字コードutf8mb4(マルチバイト日本語対応)

データベースが作成されているか、

以下のコマンドを入力し、確認をしてください。

mysql> show databases;

以下のようにtestsデータベースがあれば作成できています。

MySQLへの接続設定

プロジェクトディレクトリ内にある.envファイルを修正します。

.envファイル内の9行目辺りにデータベース設定項目がありますので、

以下のように修正してください。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tests //接続したいデータベース名
DB_USERNAME=root  //ご自身のユーザーネーム
DB_PASSWORD=root  //ご自身のパスワード

マイグレーションを実行する

最初からLaravel標準のテーブルファイルがdatabase/migrationsディレクトリに用意されています。

認証機能を作成する為のファイルです。

今回は、接続確認の為、このまま使用します。

ターミナルでプロジェクトのディレクトリに移動し、以下のコマンドを実行してください。

php artisan migrate

接続がうまくいきマイグレーションが成功すると以下のように表示されます。

これで、３つのファイルが作成されました。

最後に作成したテーブルを確認をしましょう

再度、MySQLへ接続してください。

mysql -u root -p

パスワードを入力します。

ログイン後、使用するデータベースを指定してください。

mysql> use tests;

その後、以下のコマンドで作成したテーブルを確認してください。

mysql> show tables;

以下のようにテーブル一覧が表示すれば、無事接続成功しています。

参考にした記事

Techpit Evernote風メモアプリ作成
Techpit Laravelブックレビューサイト作成