レンタルサーバーでのLaravelアプリの無料デプロイ方法

Webアプリ構築にLaravelを使っているが、稼働サーバーは安価で楽なレンタルサーバーで済ませたいもの。

今回、試行錯誤してレンタルサーバーで無料デプロイ環境を構築したので紹介します。

実現できること

この記事の方法を実装すると、masterブランチにプッシュを行うと自動的にLaravel Mixビルド&テスト環境へデプロイすることが可能となります。

環境

今回試した環境は以下です。

レンタルサーバーCPIサーバー シェアードプランACE01
CI/CD処理GitHub Actions
PHP7.2
Laravel6

レンタルサーバーはCPIサーバーでなくとも、FTPが使えれば問題ないと思います。

構成

気が向いたら構成図描きます。

環境構築

それでは実際に環境構築を行っていきましょう!

Laravelの設定

CPIサーバーではドキュメントルートは/var/www/htmlに固定されているため、Laravelもこれに合わせる。

ドキュメントルートをpublic/に設定できるレンタルサーバーであれば、この手順は必要なし。

ファイルの移動

public/index.php, public/.htaccess をプロジェクトのルートに移動させましょう。

index.phpの修正

index.phpを移動させたことに合わせ、index.phpの内容も下記のように修正します。

...

/*
|--------------------------------------------------------------------------
| Register The Auto Loader
|--------------------------------------------------------------------------
|
| Composer provides a convenient, automatically generated class loader for
| our application. We just need to utilize it! We'll simply require it
| into the script here so that we don't have to worry about manual
| loading any of our classes later on. It feels great to relax.
|
*/

require dirname(__DIR__).'/html/vendor/autoload.php';

/*
|--------------------------------------------------------------------------
| Turn On The Lights
|--------------------------------------------------------------------------
|
| We need to illuminate PHP development, so let us turn on the lights.
| This bootstraps the framework and gets it ready for use, then it
| will load up this application so that we can run it and send
| the responses back to the browser and delight our users.
|
*/

$app = require_once dirname(__DIR__).'/html/bootstrap/app.php';

....

Storageの設定

使用するStorageの場所にpublic/を追記します。

....
        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL').'/public/storage',
            'visibility' => 'public',
        ],
....

JavaScript, CSSの読み込み

JavaScript、CSS読み込み元は public/ を追記しましょう。

例では resources/views/layouts/app.blade.php を変更しています。

...
<!-- Scripts -->
<script src="{{ asset('public/js/app.js') }}" defer></script>
...

ワークフローファイルの作成

GitHubリポジトリの.github/workflows/以下にワークフローファイルを設置します。

on:
  push:
    branches: [ master ]

jobs:   
  prepare:
    runs-on: ubuntu-latest
    name: Prepare
    steps:
      - uses: actions/checkout@v2
        with:
          fetch-depth: 0
      - name: cache node_modules
        id: cache_node_modules
        uses: actions/cache@v1
        with:
         path: ./node_modules
         key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
         restore-keys: |
           ${{ runner.os }}-npm-
      - name: npm install
        if: steps.cache_node_modules.outputs.cache-hit != 'true'
        run: npm install
      - name: npm run
        run: npm run prod
      - name: upload js artifact
        uses: actions/upload-artifact@v1
        with:
          name: public_js
          path: ./public/js
      - name: upload css artifact
        uses: actions/upload-artifact@v1
        with:
          name: public_css
          path: ./public/css

  deploy:
    runs-on: ubuntu-latest
    name: Deploy
    needs: prepare
    steps:
      - name: checkout
        uses: actions/checkout@v2
        with:
          fetch-depth: 0
      # Prepareジョブでやりたいが、artifactのuploadに時間がかかるのでDeployジョブで実施
      - name: cache vendor
        id: cache_vendor
        uses: actions/cache@v1
        with:
          path: ./vendor
          key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
          restore-keys: |
            ${{ runner.os }}-composer-
      - name: composer install
        if: steps.cache_vendor.outputs.cache-hit != 'true'
        run: composer install -n --prefer-dist
      - name: Download js artifact
        uses: actions/download-artifact@v1
        with:
          name: public_js
      - name: Download css artifact
        uses: actions/download-artifact@v1
        with:
          name: public_css
      - name: move artifacts
        run: |
          mv public_js public/js
          mv public_css public/css
      - name: place env
        run: cp .env.staging .env
      - name: FTP-Deploy-Action
        uses: SamKirkland/FTP-Deploy-Action@3.1.1
        with:
          ftp-server: sftp://hoge.ne.jp:10397/html/
          ftp-username: hogehoge
          ftp-password: ${{ secrets.CPI_STAGING_PASSWORD }}
          git-ftp-args: --insecure

シークレットの作成

GitHub内に暗号化された値を定義することができる。パスワードはこれを利用しよう。

ここに定義したものが、ワークフローファイルにて以下のように呼び出せる。

${{ secrets.CPI_STAGING_PASSWORD }}

リポジトリのSetting→Secrets から設定できる。


もっとスマートにする方法はあると思うが、とりあえず動くことは確認した🤓

ちなみにワークフローを動かす前に、FTPで手動でファイル一式を上げておいたほうが良い

時間がかかるので、ビルド時間の無料枠がもったいない

留意点・改善点

FTPで転送しているだけなので、同期はできていない。

つまり、ファイルを削除してもサーバーからは削除されない

これを実現しようと思うと別の方法を取る必要がある。

rsyncが使えれば良いのだが、ここでは不可。lftpも試したが、全てのdirectoryにmirroringが走り、デプロイに絶望的に時間がかかる。

以下の方法で無理やりrsyncを導入できそうだが、これはまた次回の課題に。

当面、ファイル削除は手動にて運用してみることにした。

料金かからないの?

無料のGitHubアカウントなら月2000分ビルドできます。

無駄に時間のかかるデプロイを避け、1アカウント1〜2プロジェクトくらいに抑えれば無料で運用できそうです。

GitHub Actionsの支払いについて - GitHub Docs
アカウントに含まれるストレージや利用時間 (分) を超えてGitHub Actionsを使用したい場合は、追加の使用分が請求されます。

コメント

タイトルとURLをコピーしました