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

2018/08/26

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も使ってみたいけど同時に2つは作業が進まなくなるのでまずは経験のあるLaravelでサクッと。

仕様設計

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

要件定義

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

まずはこのくらいかな

出来れば実現したい要件

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

環境構築

VagrantとVirtualBoxのインストール

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

VirtualBoxのインストール

Virhttps://www.virtualbox.org/tualBox

Vagrant のインストール

https://www.vagrantup.com

VagrantでCentOS7環境を構築

  1. コマンドラインを開き、作業フォルダへ移動
    ※ コマンドラインは管理者権限で開きましょう。後述するnpm installでシンボリックリンク作成時にエラーになるので。

    cd C:\develop\InvestmentTrustsProject
  2. vagrant初期化
  3. vagrant init centos/7
  4. ネットワーク設定
    Vagrantfileを修正します 33行目あたり。

    # config.vm.network "private_network", ip: "192.168.33.10"
       ↓
    config.vm.network "private_network", ip: "192.168.33.10"
  5. ゲストOSの起動
    vagrant up

    CentOSのイメージのダウンロードがあるので時間かかります。完了したら動作してるか確認します。

    vagrant status
    
    Current machine states:
    default                   running (virtualbox)

    runningと表示されれば成功です。

  6. ssh接続
    vagrant ssh

    poderosa等ターミナルソフトを使って接続する場合は、鍵認証なので以下のように接続します

    ユーザID パスワード 秘密鍵
    vagrant vagrant C:/develop/InvestmentTrustsProject/.vagrant/machines/default/virtualbox/private_key
  7. 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側は前もってフォルダ作成しておいてください。
  1. vagrantfile を修正します。
    46行目当たり
    config.vm.synced_folder "./workspace", "/workspace"

  2. vagrant reload

    vagrant reload

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

Laravelプロジェクト作成

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

Apacheの設定

  1. 設定ファイルを以下に作成
    /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の再起動

$ systemctl restart httpd

Laravel動作確認

ブラウザでアクセスしてみます。
http://192.168.33.10/

このように表示されれば成功です。

Vue.jsの動作確認

とりあえずは正常にビルドできるかの確認だけ。
webpackで必要なパッケージがダウンロードされればOKとします。
/workspace/laravel/public で以下コマンド実行

$ npm install

※ シンボリックリンクの作成でエラーになる場合は、vagrant haltし仮想マシンを一旦おとしたあと、「管理者権限のコマンドライン」でvagrant upしてください。

まとめ

これでLaravelとvue.jsの開発環境が整いました。 一旦Vagrantfileや各種インストール用のbootstrap.shを用意しておけば、それを流用して簡単に別の環境を作成できるので便利なのでおすすめですよ。

修正履歴

2018/9/24 phpインストールにmyql接続用モジュールが足りなかったので追加しました。(php-pdo php-mysql)