netlify

【初心者向け】Netlifyの使い方は?無料で静的サイトを公開する

こんにちは、フルスタックエンジニアのryuです。

今回の記事では、Netlifyの使い方を解説します。Netlifyを使うと、無料で静的サイトを公開することができます。さらにGitHubと連携することで、簡単にビルド・デプロイを自動化することができます。初心者向けにNetlifyの使い方を解説します。

Netlifyの使い方は?無料で静的サイトを公開する

今回の記事では、Netlifyの使い方を解説します。

Netlifyとは、静的サイトをホスティングできるWebサービスです。無料で使用することができ、SSLやGitHubとの連携も簡単にできます。

NetlifyとNuxt.jsを使用してこちらのWebサイトを公開しました。

eisakubun-dojo (eisakubun-dojo.netlify.app)

インフラの設定に時間を掛けることなく、アプリ開発に注力できるので、アプリ開発者の方にオススメのWebサービスです。

では、使い方を解説します。

Netlifyのサイトにログインする

まず、Netlifyのサイトにアクセスしましょう。こちらのURLをクリックしてください。

Netlify: Develop & deploy the best web experiences in record time

そして、画面左上の「Sign up」をクリックします。

Netlifyサインアップ

サインアップの画面に来たらGitHubやGitLabのアカウントでログインします。

GitHubのアカウントが無い方はこちらから作成してください。

GitHub

Netlifyでアプリを公開する

ログインするとこのような画面になります。

Netlif topページ

新しくWebアプリを公開する方法は、画面中央の「New site from Git」をクリックします。

次の画面では、公開するアプリのソースコードがあるGitを選択します。

Netlify Gitの登録

GitHubと連携すると、GitHub上のソースコードからビルド・デプロイを自動でやってくれます。次はビルドの設定です。

Nuxt.jsのビルドの設定

Gitの認証が完了すると、ビルドの設定をします。私の場合はNuxt.jsを使用してアプリを作成しているので、下記のようになります。

Netlifyビルドの設定

Buildコマンドは「npm run build」、公開するディレクトリは「dist/」です。

これで、「Deploy site」をクリックして完了です。

Netlifyを使うとアプリを最速で公開できる

これで設定は完了です。アプリにアクセスしてみましょう。アプリの管理画面のトップにURLがあるので、それをクリックしてアクセスすることができます。

ドメイン名を変更したい場合は、「Domain settings」から変更することができます。

AWSのS3とcloudfrontを使用すると同じような構成を構築することができます。しかし、Netlifyを使うと簡単にできるので、検証完了レベルならばNetlifyを使うことをオススメします。

Netlify使い方まとめ

今回の記事では、Netlifyの使い方を解説しました。Webの開発をしている方は是非使ってみてください。

インフラの構築がとても楽になります。Webアプリの開発に注力することができます。

また、Webアプリ開発をさらに学びたい方は、こちらの講座がオススメです。

About me
大手メーカのIT部門→上場ベンチャーでフルスタックエンジニアやってます。エンジニア歴は8年目。 サーバ、ネットワーク、セキュリティ、クラウドについて投稿します。 AI、ARも勉強中です! youtubeでも技術ネタを発信していきます。↓のアイコンよりご覧ください!
年収をアップさせたいエンジニア必見!

レバテックキャリアは、高い専門性を持つアドバイザーが5000件以上のハイクラス求人の中から理想の求人をご提案します。年収600万円以上のハイクラス求人が多数!!!

PayPay、Sansan、SmartHR、ディー・エヌ・エー、LINE、freee、アクセンチュア、PwC、デロイトトーマツ、NTTデータ、SCSK、IIJなど大手IT企業からWeb系企業、スタートアップまでを幅広く網羅

キャリアップしたい方、年収をアップさせたい方などにおすすめです。

ハイクラス求人を見てみる