【vue.jsでSPA】Vagrantで開発環境を用意する

2018/08/262018/09/24

vue.jsを習得する必要があるため、勉強をかねてWebアプリを作成してみます。ただ習得するだけの勉強では理解度が深まらない性質なので何か物を作らないと気がすみません。作成するシステムは、現在運用している投資信託の管理にします。

環境

開発環境

Windows10
Visual Studio Code 1.26

サーバ

Vagrant+VirtualBoxの仮想環境を使用します。

CentOS7.5 ※ boxは「centos/7」
Apache2.4.6
MySQL5.7 – PHP7.2

フォルダ構造

以下のフォルダに環境を作成していきます。
C:\develop\InvestmentTrustsProject

使用するフレームワーク

フロントサイド： vue.js
サーバサイド：Laravel5.6
※ Goも使ってみたいけど同時に２つは作業が進まなくなるのでまずは経験のあるLaravelでサクッと。

仕様設計

自分で作成し自分で使うだけなのでざっくりと。仕様設計ではなく要件定義くらいのものですが。

要件定義

購入している投資信託の現在価額の計算。
購入口数とかどこまで正確にとれるかは不明なので、最低でも購入日の価値からどのくらいの差額が出ているかを計算。
投資額と収支額の表示

まずはこのくらいかな

出来れば実現したい要件

投資信託運用会社側にAPIがあればそれを利用して正確な数値を取得。
過去の基準価額が取得できるのであれば、取り込む（できれば自動で）
ポートフォリオとかもできればいいなぁ

環境構築

VagrantとVirtualBoxのインストール

どちらもインストーラ通りにインストールするだけです。

VirtualBoxのインストール

Virhttps://www.virtualbox.org/tualBox

Vagrant のインストール

https://www.vagrantup.com

VagrantでCentOS7環境を構築

コマンドラインを開き、作業フォルダへ移動
※ コマンドラインは管理者権限で開きましょう。後述するnpm installでシンボリックリンク作成時にエラーになるので。
```
cd C:\develop\InvestmentTrustsProject
```
vagrant初期化

vagrant init centos/7

ネットワーク設定
Vagrantfileを修正します 33行目あたり。

# config.vm.network "private_network", ip: "192.168.33.10"
   ↓
config.vm.network "private_network", ip: "192.168.33.10"

ゲストOSの起動
```
vagrant up
```
CentOSのイメージのダウンロードがあるので時間かかります。完了したら動作してるか確認します。
```
vagrant status

Current machine states:
default                   running (virtualbox)
```
runningと表示されれば成功です。
ssh接続
```
vagrant ssh
```
poderosa等ターミナルソフトを使って接続する場合は、鍵認証なので以下のように接続します

ユーザID パスワード秘密鍵

vagrant vagrant C:/develop/InvestmentTrustsProject/.vagrant/machines/default/virtualbox/private_key

ユーザID	パスワード	秘密鍵
vagrant	vagrant	C:/develop/InvestmentTrustsProject/.vagrant/machines/default/virtualbox/private_key

VagrantのprovisionでApache、PHP7.2、MySQL5.7をインストール
Vagrantfileに直接記載せず別途bootstrap.shを作成してそこに各種インストールを記述しておきます。この方が、流用しやすいので。
C:/develop/InvestmentTrustsProject/bootstrap.sh

#!/usr/bin/env bash

dir_provision="/home/vagrant/.vagrant_provision"

if [ ! -d $dir_provision ]; then
    mkdir $dir_provision
fi

# Disabled SELinux
setenforce 0
sed -i.org -e "/^SELINUX=/s/enforcing/disabled/" /etc/selinux/config

# epel repo
yum -y install http://rpms.famillecollet.com/enterprise/remi-release-7.rpm

# Apache
if [ ! -e $dir_provision/httpd ]; then
    touch $dir_provision/httpd
    yum -y install httpd
    systemctl enable httpd
fi

httpdconf="
<VirtualHost *:80>
    #ServerName itp.localhost
    DocumentRoot "/workspace/public"
    <Directory "/workspace/public">
    Options FollowSymLinks
    AllowOverride all
    Require all granted
    </Directory>
</VirtualHost>
"
if [ ! -e /etc/httpd/conf.d/laravel_httpd.conf ]; then
    echo "$httpdconf" > "/etc/httpd/conf.d/laravel_httpd.conf"
fi

# php7.2
if [ ! -e $dir_provision/php72 ]; then
    touch $dir_provision/php72
    yum -y install –enablerepo=remi,remi-php72 php php-mbstring php-xml php-pdo php-mysql
fi
# composer
if [ ! -e /usr/local/bin/composer ]; then
    php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
    php composer-setup.php –install-dir=/usr/local/bin/composer –filename=composer
    php -r "unlink('composer-setup.php');"
fi

# MySQL
if [ ! -e /home/vagrant/.mysql ]; then
    touch /home/vagrant/.mysql
    yum -y install https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm
    yum -y install mysql-community-server
    ## initialize root not password.
    mysqld –initialize-insecure –user=mysql
    systemctl enable mysqld
fi

# node 8
curl –silent –location https://rpm.nodesource.com/setup_8.x | sudo bash –
yum -y install nodejs

# Git
yum -y install git
yum -y install zip unzip

# Restart Service
systemctl restart httpd
systemctl restart mysqld

Vagrantfileにプロビジョニング時にbootstrap.shを使用するように設定します。
Vagrantfileの最後の方に、プロビジョニング用の定義がコメントアウトされてるのでその下にでも追加しておきます。

#config.vm.provision "shell", inline: <<-SHELL
  #   apt-get update
  #   apt-get install -y apache2
  #SHELL
  config.vm.provision :shell, path: "bootstrap.sh"

※ 開発環境なのでMySQLのrootパスワードは空で設定しています。

プロビジョニング実行

vagrant reload –provision

これで仮想マシンに開発に必要なパッケージが一通り導入完了しました。

Windowsと仮想マシン側との共有設定

Windows: C:\develop\InvestmentTrustsProject\workspace
CentOS: /workspace
※ Windows側は前もってフォルダ作成しておいてください。

vagrantfile を修正します。
46行目当たり

config.vm.synced_folder "./workspace", "/workspace"

vagrant reload
```
vagrant reload
```

※ 設定が正しければ、CentOS側の/workspaceにアクセス可能になります。アクセスできない場合、vagrant起動時にエラーが出てるはずなので確認してください。

Laravelプロジェクト作成

cd /workspace
composer create-project –prefer-dist laravel/laravel laravel

Apacheの設定

設定ファイルを以下に作成
/etc/httpd/conf.d/laravel_httpd.conf

<VirtualHost *:80>
    #ServerName itp.localhost
    DocumentRoot "/workspace/laravel/public"
    <Directory "/workspace/laravel/public">
    Options FollowSymLinks
    AllowOverride all
    Require all granted
    </Directory>
</VirtualHost>

Apacheの再起動