LoginSignup
0
0

More than 1 year has passed since last update.

【未経験】Laravel + sail + vue + PostgreSQLアプリをRender.comにデプロイする

Posted at

初めに

Laravel sailとVue.jsとPostgreSQLを使ったアプリをRender.comにデプロイするのにとても苦労したので備忘録として残します。

render.comで本番環境のshell(コマンドライン)を使う場合無料プランではなく
Starterプラン(7$)を使う必要があります。
( 7$ = 1,000.79 円(2023/06/24現在) )

手順

この記事ではアプリケーションの作成は解説しません。その手順を知りたい方はこちらの記事もご覧ください。

1.Dockerfileをプロジェクトのルートディレクトリに作成する。

以下のようなDockerfileをプロジェクトのルートディレクトリ(.envファイルやpackage.jsonファイルがあるところ)に作成します。php:8.1-fpmのバージョンは自分の環境に合わせて変更してください。

FROM php:8.1-fpm

# 依存関係のインストール
RUN apt-get update && apt-get install -y \
    curl \
    zip \
    unzip \
    git \
    libonig-dev \
    libpq-dev \
    && docker-php-ext-install pdo_pgsql mbstring

# Composerのインストール
COPY --from=composer /usr/bin/composer /usr/bin/composer

# Laravelの依存関係をインストール
WORKDIR /var/www
COPY . /var/www
RUN composer install

# Node.jsとNPMのインストール
RUN curl -sL https://deb.nodesource.com/setup_18.x | bash -
RUN apt-get -y install nodejs

# Vue.jsの依存関係をインストール
COPY package*.json ./
RUN npm install
RUN npm run build

CMD php artisan serve --host=0.0.0.0 --port=8080

EXPOSE 8080

2.Render.comの用意

Render.comでアカウントを作成し、dashboard画面で右上の青いボタンからWeb Serviceを選択する。

そこからデプロイしたいgithubのリポジトリを選択します。

その後、以下の画面で必要な情報を入力し、Create Web Serviceで作成します。

スクリーンショット (87).png

NAMEにはアプリケーションの名前を、Regionは恐らくシンガポールが一番近いのでシンガポールを選びます。

Runtimeではdockerを選びます。

Instance Typeはvueを本番環境でビルドするのにshellを使う必要があるのでstarterを選びます。

3.DBの用意

またダッシュボードに戻り、右上の青いボタンからPostgleSQLを選択。

NAMEにはアプリ名+DBのようにわかりやすければOKです。
Regionはこちらもシンガポール
Instance Typeはこちらは無料プランでも大丈夫です。(無料プランは90日で期限が切れます。)

その後Create Databaseで作成します。

StatusCreateingからAvailableとなるまで待ちます。(少し待てば完了すると思います。)

4.環境変数の設定

ダッシュボードに戻り先ほど作成したWeb Serviceに戻り左のメニューからEnvironmentを選択し、環境変数を設定していきます。

下の画像のようにLaravelアプリの.envファイルにある環境変数をrender.com側にも設定します。

APP_ENVAPP_DEBUG には本番環境ではproduction false を設定し、
APP_URL にはページの左上にあるURL( https://your-appname.onrender.com )を設定します。

その他の環境変数は.envファイルの内容を写します。

スクリーンショット (93).png

4.Vueを本番環境でビルドする。

Web Serviceの左のメニューからshellを選択し、コマンドラインを開き以下のコマンドを入力。

npm run build

5.DBをマイグレイトする。

先ほどのコマンドラインから以下のコマンドを入力すればアプリケーションが本番環境で動くようになると思います。

php artisan migrate

終わりに

最初はSailが開発環境用ということを知らず、そのままデプロイしようとしていましたが、本番環境用のDockerfileを用意しないといけないということを後から知り、技術やサービスを使う際はきちんとその物について知識を付けてから使わないといけないなと痛感しました...

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0