見出し画像

【Laravel】0からのWEBサイト構築(無料で可能)

こんにちは、ジャム(@JUM22676603)です。私は約1年ほどプログラミングを学習し34歳から未経験でwebエンジニアに転職することができました。本記事ではLaravelというフレームワークを使ってインターネット上に自分が作成したwebアプリをアップする方法を紹介します。

対象読者

一通りProgeteやドットインストール等でhtml,css,phpを学び、インターネット上に自分が作った物をアップしてみたい方、macをお持ちの方、。なるべく丁寧に解説しているつもりですが、不明点あればご連絡ください。

完成版はこちら↓↓↓

はじめに

下記のように黒い背景はコマンドラインでの表記となります。

% git

「$」や「%」以降がコマンドラインで入力する箇所となります。

$ docker --version
% cd 

「-」表記は変更前、「+」表記は変更後になります。
以下の場合は、80という番号を8888に変更しています。

- NGINX_HOST_HTTP_PORT=80
+ NGINX_HOST_HTTP_PORT=8888

dockerのインストール

docker(ドッカー)とはプログラミングをする上での開発環境を提供してくれるサービスです。このようなサービスを使わずに一から開発環境を準備するのは大変なのでこのサービスを使います。

wikipediaより
Dockerは、コンテナと呼ばれるOSレベルの仮想化(英語版)環境を提供するオープンソースソフトウェアである。VMware製品などの完全仮想化を行うハイパーバイザ型製品と比べて、ディスク使用量は少なく、仮想環境 (インスタンス) 作成や起動は速く、性能劣化がほとんどないという利点を持つ。


まずはdockerを導入していきます。こちらのリンクをクリックして下さい。

1.Sign Inをクリック

スクリーンショット 2020-02-29 10.03.17

2. Sign Upをクリック

スクリーンショット 2020-02-29 10.08.53

3. Docker ID , Email , Password を入力し、チェックボックスにチェックを入れてください。

スクリーンショット 2020-02-29 10.10.54


その後、こちらのリンクに移動し、「Get Docker」をクリックしtmacにインストールしてください。

スクリーンショット 2020-02-29 10.22.06

ダウンロードできているか確認していきます。
ターミナルを開いていきましょう。

macをデスクトップ画面に戻して下さい。

虫眼鏡マークをクリック

スクリーンショット 2020-02-29 10.37.44

「ターミナル」と検索し、アプリを開く

スクリーンショット 2020-02-29 10.49.14

ターミナルが開いたら、「docker version」と入力。以下のように表示されれば、インストール完了です。

% docker version

Client: Docker Engine - Community
Version:           19.03.5
API version:       1.40
Go version:        go1.12.12
Git commit:        633a0ea
Built:             Wed Nov 13 07:22:34 2019
OS/Arch:           darwin/amd64
Experimental:      false

homebrewのインストール

homebrewとはmac用のパッケージ管理システムです。プログラミングをする上で必要なモノを簡単にインストールする事ができます。

公式サイトはこちらです。覗いてみてください。

以下のコマンドhomebrewをインストールする事ができます。

% /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

gitのインストール

gitとはプログラミング言語で作成したソースコードの履歴を保存したり、ネットワーク上に保存できるサービスです。これを使う事でインターネット上に存在する誰かが作ったモノをインストールしたり、自分で作成してモノをアップロードしたりする事が簡単になります。

wikipediaより
Git(ギット[2][3][4])は、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。Linuxカーネルのソースコード管理に用いるためにリーナス・トーバルズによって開発され、それ以降ほかの多くのプロジェクトで採用されている。Linuxカーネルのような巨大プロジェクトにも対応できるように、動作速度に重点が置かれている。現在のメンテナンスは濱野純 (英語: Junio C Hamano) が担当している。Gitでは、各ユーザのワーキングディレクトリに、全履歴を含んだリポジトリの完全な複製が作られる。したがって、ネットワークにアクセスできないなどの理由で中心リポジトリにアクセスできない環境でも、履歴の調査や変更の記録といったほとんどの作業を行うことができる。これが「分散型」と呼ばれる理由である。

「brew install git」と入力してインストールしましょう。

% brew install git 

「git --version」と入力し、バージョンが表示されていればインストールが完了しています。

% git --version
git version 2.25.0

laradockをダウンロードし開発環境を構築する

・Laravelを構築するフォルダの作成:「laravel_docker」とする
・今回作成するwebアプリを「project01」というフォルダを作成し、その中で管理するします。フォルダを作成する場所はどこでもokです。

$ mkdir laravel_docker && cd laravel_docker
$ mkdir project01 && cd project01

laradockをダウンロードします。

$ git clone https://github.com/Laradock/laradock.git

ダウンロードできているか確認します。
「ls」と入力して、laradockと表示されていれば

% ls
laradock

laradockの設定ファイルを編集していきます。
laradockフォルダに移動し、env-exampleを.envにコピーしリネームします。

% cd laradock
% cp env-example .env

dockerを起動します。
最初の起動は時間がかかります。

% docker-compose up -d nginx

※ちなみに以下のコマンドでdockerの停止が可能です

% docker stop $(docker ps -q)

そして、.envファイルを編集します。

% vi .env

「/nginx」で検索してください。
「escボタン」を押して、「aボタン」を押して入力モードにして、PORT番号を80→8888に変更してください。
最後に「:wq」で保存します。

### NGINX #################################################
- NGINX_HOST_HTTP_PORT=80
+ NGINX_HOST_HTTP_PORT=8888
NGINX_HOST_HTTPS_PORT=443
NGINX_HOST_LOG_PATH=./logs/nginx/
NGINX_SITES_PATH=./nginx/sites/
NGINX_PHP_UPSTREAM_CONTAINER=php-fpm
NGINX_PHP_UPSTREAM_PORT=9000
NGINX_SSL_PATH=./nginx/ssl/

再度、docekrを起動します。

% docker-compose up -d nginx
Starting laradock_docker-in-docker_1 ... done
Starting laradock_workspace_1        ... done
Starting laradock_php-fpm_1          ... done
Starting laradock_nginx_1            ... done

ワークスペースにログインします。

% docker-compose exec --user=laradock workspace /bin/bash
laradock@5d441cecb9e6:/var/www$ 

ログインできたら、laravelのアプリをダウンロードします。
laravelのバージョンを5.8
アプリ名を「app」とします。

laradock@5d441cecb9e6:/var/www$ composer create-project --prefer-dist laravel/larel="5.8" app

ダウンロードが長いですが、完了したら一度作業環境を抜けて、laradockの環境設定をします。

laradock@9552a924534b:/var/www$ exit
exit
% vi .env

「APP_CODE_PATH_HOST=../」の後に「app」を追加します。

###########################################################
###################### General Setup ######################
###########################################################
### Paths #################################################

# Point to the path of your applications code on your host
- APP_CODE_PATH_HOST=../
+ APP_CODE_PATH_HOST=../app

ブラウザを開いて、localhost:8888と入力(もしくは以下のリンクをクリック)してlaravelが立ち上がっているか確認します。

localhost:8888


スクリーンショット 2020-03-01 20.16.33

Laravelでtodoアプリを作成していきます。

もう一度、ワークスペースにログインします。

% docker-compose exec --user=laradock workspace /bin/bash
laradock@9552a924534b:/var/www


gitを使えるようにします。git はデータを保存するときに必ず保存した人の名前と E メールを記載することになっています。なので、それを設定する。

laradock@9552a924534b:/var/www$ git config --global user.email 'your email'
laradock@9552a924534b:/var/www$ git config --global user.name 'your name'

「git init」で初期化します。

laradock@9552a924534b:/var/www$  git init
Initialized empty Git repository in /var/www/.git/

初期のフォルダ、ファイルデータをコミットし、履歴を保存しておきます。

laradock@9552a924534b:/var/www$ git add .
laradock@9552a924534b:/var/www$ git commit -m "initial"
[master (root-commit) 91be24f] initial
88 files changed, 8133 insertions(+)

.envファイルを開き、データベースの設定をします。今回は設定が簡単なsqliteを設定します。
DB_HOST〜DB_PASSWORDまでは全て削除してください。

- DB_CONNECTION=mysql
- DB_HOST=127.0.0.1
- DB_PORT=3306
- DB_DATABASE=homestead
- DB_USERNAME=homestead
- DB_PASSWORD=secret

+ DB_CONNECTION=sqlite

編集が完了したら、「escボタン」→「:」→「wq」で保存してください。

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
:wq

laravelは初期状態から、ユーザーに関するマイグレーションが作成されています。今回は不要なので削除します。

laradock@9552a924534b:/var/www$ cd database/migrations
laradock@9552a924534b:/var/www/database/migrations$ ls
2014_10_12_000000_create_users_table.php
2014_10_12_100000_create_password_resets_table.php
laradock@9552a924534b:/var/www/database/migrations$ rm 2014_10_12_000000_create_users_table.php 
laradock@9552a924534b:/var/www/database/migrations$ rm 2014_10_12_100000_create_password_resets_table.php

sqlite用のデータベースファイルを作成します。
1つ上のフォルダに移動し、作成します。

laradock@9552a924534b:/var/www/database/migrations$ cd ..
laradock@9552a924534b:/var/www/database$ touch database.sqlite

モデルとマイグレーションファイルの作成をしていきます。

laradock@9552a924534b:/var/www$ php artisan make:model Todo --migration
Model created successfully.
Created Migration: 2020_03_03_012046_create_todos_table

マイグレーションフォルダへの移動と、マイグレーションファイルを開きます。

laradock@9552a924534b:/var/www$ cd database/migrations/
laradock@9552a924534b:/var/www/database/migrations$ ls
2020_03_03_012046_create_todos_table.php
laradock@9552a924534b:/var/www/database/migrations$ vi 2020_03_03_012046_create_todos_table.php 

todosテーブルを作成するために、マイグレーションファイルを編集します。

    public function up()
   {
       Schema::create('todos', function (Blueprint $table) {
            $table->bigIncrements('id');
+           $table->text('body');
            $table->timestamps();
       });

編集が完了したら、「escボタン」→「:」→「wq」で保存してください。

「/var/www」フォルダに移動し、テーブル作成をするためにmigrateを実行します

laradock@9552a924534b:/var/www/database$ cd /var/www
laradock@9552a924534b:/var/www$ php artisan migrate
Migration table created successfully.
Migrating: 2020_03_03_012046_create_todos_table
Migrated:  2020_03_03_012046_create_todos_table (0.03 seconds)

テーブルが作成されているか確認します。
「.tables」でtodosが表示されていれば作成できています。
「PRAGMA table_info('todos')」でテーブルの構造を確認できます。

laradock@9552a924534b:/var/www$ sqlite3 database/database.sqlite
SQLite version 3.11.0 2016-02-15 17:29:24
Enter ".help" for usage hints.
sqlite> .tables
migrations  todos     
sqlite> PRAGMA table_info('todos');
0|id|integer|1||1
1|body|text|1||0
2|created_at|datetime|0||0
3|updated_at|datetime|0||0

コントローラーを作成します。

laradock@9552a924534b:/var/www$ php artisan make:controller TodosController
Controller created successfully.

ルーティングの設定をします。routeフォルダに移動し、web.phpを編集します。

laradock@9552a924534b:/var/www$ cd routes
laradock@9552a924534b:/var/www/routes$ vi web.php

最初から記載してある、Route::getをコメントアウト(//)します。
その後2つ追記します。
Route::get('/','TodosController@index'); はブラウザ上でlocalhostにアクセスした際に、先ほど作成したTodosControllerのindexメソッドを実行しなさいと言う命令になります。

Route::resource('todos','TodosController');は

<?php/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|

*///以下をコメントアウトする
+ //Route::get('/', function () {
+ //    return view('welcome');
+ //});

+ Route::get('/','TodosController@index'); 
+ Route::resource('todos','TodosController');

コントローラーを編集していきます。

「public function index()」を追加する事で、web.phpの内容から「localhost:8888」にアクセスした際にindexメソッドが実行されます。
そして、indexメソッド内の「return view('todos.index');」で/var/www/resources/views/todosフォルダ内のindex.blade.phpが表示されます。

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class TodosController extends Controller
{
   
+     public function index() {
+     return view('todos.index');
+   }
   
}

それでは、見た目の部分(view)を作成していきます。

laradock@9552a924534b:/var/www$ cd /var/www/resources/views
laradock@9552a924534b:/var/www/resources/views$ mkdir todos && cd todos
laradock@9552a924534b:/var/www/resources/views/todos$ touch index.blade.php
laradock@9552a924534b:/var/www/resources/views/todos$ vi index.blade.php

以下の内容をindex.blade.phpに追記してください。

<!doctype html>
<html lang="ja">
 <head>
   <title>Bootstrap基本テンプレート</title>
 <!-- 必要なメタタグ -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 </head>
 <body>
   <h1>こんにちは!</h1>
​<!-- オプションのJavaScript -->
<!-- 最初にjQuery、次にPopper.js、次にBootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

編集が完了したら、「escボタン」→「:」→「wq」で保存してください。

一度ブラウザでアクセスして、以下のように表示されていればOKです。

localhost:8888

スクリーンショット 2020-03-04 11.33.16

todo機能を実装します。

まずは、コントローラーを修正していきます。

laradock@9552a924534b:~$ cd /var/www/app/Http/Controllers
laradock@9552a924534b:/var/www/app/Http/Controllers$ vi  TodosController.php

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

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Todo;

class TodosController extends Controller
{
   //
   public function index() {
     $todos = Todo::all();
     return view('todos.index')->with('todos',$todos);
   }

public function store(Request $request) {
$todo = new Todo();
$todo->body = $request->body;
$todo->save();
return redirect('/');
}

public function destroy(todo $todo) {
$todo->delete();
return redirect('/');
}

public function edit(todo $todo) {
return view('todos.edit')->with('todo',$todo);
}

public function update(Request $request,todo $todo) {
$todo->body = $request->body;
$todo->save();
return redirect('/');
}

}

viewを修正します。

laradock@9552a924534b:/var/www/app/Http/Controllers$ cd /var/www/resources/views/todos
laradock@9552a924534b:/var/www/resources/views/todos$ vi index.blade.php

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

<!doctype html>
<html lang="ja">
 <head>
   <title>Jum Todoリスト</title>
 <!-- 必要なメタタグ -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 </head>
 <body>
   <div class="container" style="margin-top:50px;">
   <h1>Todoリスト追加</h1>
<!-- todoを追加するブロック -->
   <form action='{{ url('/todos')}}' method="post">
     {{csrf_field()}}
 <div class="form-group">
   <label >やることを追加してください</label>
   <input type="text" name="body"class="form-control" placeholder="todo list" style="max-width:1000px;">
 </div>
 <button type="submit" class="btn btn-primary">追加する</button>
</form>
<!-- todoリストを表示するブロック -->
   <h1 style="margin-top:50px;">Todoリスト</h1>
   <table class="table table-striped" style="max-width:1000px; margin-top:20px;">
<!-- todoを表示する -->
 <tbody>
   @foreach ($todos as $todo)
   <tr>
     <td>{{$todo->body}}</td>
<!-- 編集ボタン -->
<td><form action="{{ action('TodosController@edit', $todo) }}" method="post">
{{ csrf_field() }}
{{ method_field('get') }}
<button type="submit" class="btn btn-primary">編集</button>
</form>
</td>
<!-- 削除ボタン -->
<td><form action="{{url('/todos', $todo->id)}}" method="post">
{{ csrf_field() }}
{{ method_field('delete') }}
<button type="submit" class="btn btn-danger">削除</button>
</form>
</td>
</tr>
@endforeach
</table>
</div>
 <!-- オプションのJavaScript -->
 <!-- 最初にjQuery、次にPopper.js、次にBootstrap JS -->
   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
   <script>
   (function() {
 'use strict';
var cmds = document.getElementsByClassName('del');
var i;
for (i = 0; i < cmds.length; i++) {
cmds[i].addEventListener('click', function(e) {
e.preventDefault();
if (confirm('are you sure?')) {
document.getElementById('form_' + this.dataset.id).submit();
}
});
}
})();
</script>
 </body>
</html>

編集用のviewを作成

laradock@9552a924534b:/var/www/resources/views/todos$ vi edit.blade.php

以下のように編集してください。

<!doctype html>
<html lang="ja">
 <head>
   <title>Jum Todoリスト</title>
 <!-- 必要なメタタグ -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 </head>
<body>
<div class="container" style="margin-top:50px;">
<h1>Todoリスト更新</h1>
<form action='{{ url('/todos',$todo->id) }}' method="post">
{{csrf_field()}}
{{ method_field('patch')}}
<div class="form-group">
<label >やることを更新してください</label>
<input type="text" name="body"class="form-control" value="{{ $todo->body }}" style="max-width:1000px;">
</div>
<button type="submit" class="btn btn-primary">更新する</button>
</form>
</div>
 <!-- オプションのJavaScript -->
 <!-- 最初にjQuery、次にPopper.js、次にBootstrap JS -->
   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
   <script>
   (function() {
 'use strict';
var cmds = document.getElementsByClassName('del');
var i;
for (i = 0; i < cmds.length; i++) {
cmds[i].addEventListener('click', function(e) {
e.preventDefault();
if (confirm('are you sure?')) {
document.getElementById('form_' + this.dataset.id).submit();
}
});
}
})();
</script>
 </body>
</html>

ここでtodoリストのwebアプリ作成が終了しましたので、動作確認します、「localhost:8888」をブラウザで開くか、以下クリックしてください。

localhost:8888

herokuでデプロイしていきます

herokuとはwebアプリケーションを簡単に構築するためのプラットフォームを提供しているサービスでPaaS(Platform as a Service)と呼ばれているモノです。

herokuアカウントを作成してしていきます

こちらのリンクでアカウントを作成してください

スクリーンショット 2020-03-05 12.26.48

homebrewでheroku cliをインストールします。

ワークスペース上から抜けてください。そしてホームディレクトリへ移動しておきましょう。

laradock@9552a924534b:/var/www/resources/views/todos$ exit
exit
laradock % cd
 % 

homebrewを使って「heroku cli」をインストールします。

~ %  brew tap heroku/brew && brew install heroku

「heroku --version」と入力して、バージョンが表示されていればokです。

~ % heroku --version
heroku/7.38.2 darwin-x64 node-v12.13.0

herokuにログインしてwebアプリを作成

appフォルダいに移動してください

% cd laraverl_docker/project01/app

herokuにログインします。

app % heroku login
heroku: Press any key to open up the browser to login or q to exit: 

何かボタンを押すとブラウザが表示されるのでログインしてください。

Opening browser to https://cli-auth.heroku.com/auth/cli/browser/81e2eb40-4975-4b2d-9e4e-234264ed3225
Logging in... done
Logged in as your-mail-adress@com

herokuアプリの作成とPHPを使用可能にする

% heroku create laradock-todo --buildpack heroku/php
Creating ⬢ laradock-todo... done
Setting buildpack to heroku/php... done
https://laradock-todo.herokuapp.com/ | https://git.heroku.com/laradock-todo.git

ここで表示されたアドレスは
「https://laradock-todo.herokuapp.com」がアドレス
「https://git.heroku.com/laradock-todo.git」がgitで管理するためのアドレスです。

Procfileを作る
ProcfileはHerokuアプリの起動時に実行するプロセスを定義するためのファイルです。
今回は、サーバーにApacheを使うこと、public/をドキュメントルートとすることを宣言するために使います。
laravelアプリのフォルダ直下にProcfileを作ります。

@MBA app % vi Procfile

Procfileを以下のように編集してください。

web: vendor/bin/heroku-php-apache2 public/

gitでheroku側にコミット、プッシュしていきます。

@MBA app % git add .
@MBA app % git commit -m 'last'
[master d1ea5a0] last
12 files changed, 175 insertions(+), 45 deletions(-)
create mode 100644 .DS_Store
create mode 100644 app/.DS_Store
create mode 100644 app/Http/.DS_Store
create mode 100644 app/Http/Controllers/TodosController.php
create mode 100644 app/Todo.php
delete mode 100644 database/migrations/2014_10_12_000000_create_users_table.php
rename database/migrations/{2014_10_12_100000_create_password_resets_table.php => 2020_03_03_012046_create_todos_table.php} (54%)
create mode 100644 resources/.DS_Store
create mode 100644 resources/views/.DS_Store
create mode 100644 resources/views/todos/edit.blade.php
create mode 100644 resources/views/todos/index.blade.php

@MBA app % git push heroku master

herokuのアドオンにPostgreSQLを作成する


@MBA app % heroku addons:create heroku-postgresql:hobby-dev
Creating heroku-postgresql:hobby-dev on ⬢ laradock-todo... free
Database has been created and is available
! This database is empty. If upgrading, you can transfer
! data from another database with pg:copy
Created postgresql-concentric-66286 as DATABASE_URL
Use heroku addons:docs heroku-postgresql to view documentation

データベースの情報を取得する。

@MBA app % heroku config:get DATABASE_URL
postgres://<ユーザ名>:<パスワード>@<ホスト>:5432/<DB名>

先ほど、取得したデータベースの情報を設定していきます。

@MBA app % heroku config:set DB_CONNECTION=pgsql
@MBA app % heroku config:set DB_HOST=<ホスト>
@MBA app % heroku config:set DB_DATABASE=<DB名>
@MBA app % heroku config:set DB_USERNAME=<ユーザ名>
@MBA app % heroku config:set DB_PASSWORD=<パスワード>
@MBA app % heroku config:set APP_KEY=$(php artisan key:generate --show)
@MBA app % heroku config:set APP_ENV=heroku
@MBA app % heroku config:set LANG=ja_JP.UTF-8
@MBA app % heroku config:set TZ=Asia/Tokyo

データベースをマイグレーションします。

@MBA app % heroku run php artisan migrate
Running php artisan migrate on ⬢ laradock-todo... up, run.3937 (Free)
Migration table created successfully.
Migrating: 2020_03_03_012046_create_todos_table
Migrated:  2020_03_03_012046_create_todos_table (0.17 seconds)
@MBA app % 

herokuにコミットしたwebアプリをアップします。

@MBA % heroku open

ブラウザに表示されていれば完了です。

もしくは、先程heroku appをcreteした際に表示されたアドレスにアクセスし、表示されていればokです。

お疲れ様でした。以上となります。


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