Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
28
Help us understand the problem. What is going on with this article?
@mnuma

vue-cliとNetlifyで始めるお手軽サイトホスティング

More than 1 year has passed since last update.

この記事は 2018年 Shinjuku.LT Advent Calendar 2018の2日目の記事です。

Shinjuku.LTは は世界で一番LTのハードルが低い勉強会 を目的に開催している勉強会です。詳しくはこちら

はじめに

1日目 の記事でも触れられていますが、Shinjuku.LT のコミュニティーのサイトはNetlifyでホスティングされています。
今回はこの Netlifyを中心にvue-cliを使ったアプリケーションの作成、サイト公開やカスタマイズについてご紹介したいと思います。

Netlifyでのサイト公開

vue-cliでアプリを作成する

まずはじめに、netlifyで公開するためのアプリを作成していきましょう。

$ yarn global add @vue/cli
$ vue create netlify-website-demo
success Saved lockfile.
✨  Done in 4.40s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project netlify-website-demo.
👉  Get started with the following commands:
$ cd netlify-website-demo
$ yarn server

  App running at:
  - Local:   http://localhost:8080/

基本的にはこれだけのステップでローカルで動作するVueアプリが作成されると思います。
ちなみにvue-cliのバージョンは3系を利用しています。

$ vue -V                                                          
3.2.1

Netlifyの設定をする

先ほど作成したアプリをGithubで管理します。まずはリポジトリを作成しましょう。

あとはNetlifyのサイトにアクセスし、デプロイまでの設定を進めて行きます。

Build commandPublish directoryの設定を行います。
作成したアプリの README.md にも書いていますが、ビルド用のコマンドは
yarn run build になります。
またビルドした成果物はdist以下に生成されるので、Publish directoryにはdistを指定しましょう。

基本的にはこれだけで、ローカルで動作したものと同様にNetlify経由でアプリケーションが配信されます。

サイトのカスタマイズ

サイト名の変更

Netlifyにはサイトホスティングだけではなく、簡単にドメインを設定できたり、サイト管理にまつわる様々な機能が提供されています。手始めにサイト名を変更してみましょう。

デフォルトで https://abc-defg-hijk.netlify.com のように配信されるサイトURLを簡単に変更する事ができます。

独自ドメインの設定

自分でドメインを取得している場合カスタムドメインの設定が出来ます。

Route53によるカスタムドメイン設定

例えば、AWSのRoute53で取得したドメインの場合、custom domainの設定から、取得しているドメインを入力し、Route53側で提供されるnetlify.comのドメインにCNAMEで登録します。

Route53側でCNAMEの設定を行います。

freenomによるカスタムドメイン設定

少し番外編になりますが、Freenomというサービスで特定のドメインを無料で取得出来るので、そちらも試してみましょう。

.tk ドメインを始めとするドメインを基本的に無料で取得することが出来ます。

Netlifyの画面でRoute53と同様に取得したドメインでカスタムドメインを設定します。

取得できたらfreenomのマネジメント画面からDNS設定が可能になります。
Netlifyの指示通り、Aレコードで提供されるIPアドレスを登録しましょう。

freenom無料ドメインの運用の注意点

.tkで取得したドメインは一定期間のアクセスがないと広告サイトに置き換わってしまいます
リリースしたばかりでアクセスが少ないサイトなど、いつの間にかドメインが無効になってしまう場合もあるので、Uptime Robot など外形監視ツールとうまく組み合わせると割とスマートに回避出来るかなと思います。

また、無料ドメインの有効期限は1年間なので、定期的な更新が必要です。
有効期限切れまでの2週間の間だけ更新可能なので気をつけてください。

Domain renewals can only be done two weeks before a domain name expires.

ルーティングの注意点

最後に、Vue Router と組み合わせた時の注意です。

$ vue add router

modehistoryとすると history.pushState APIを利用したルーティングを行う事ができます。

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
     ...
    {
      path: '/about',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

これをそのまま、Netlifyにデプロイすると、アプリケーションから遷移する場合は問題ありませんが、/about というURLを直接指定すると、サーバ側にルーティング設定が無いので404エラーとなります。

この問題を回避するために、NetlifyにはRedirect の設定があります。

/public の配下に _redirectsファイルを作成し、以下のようなリダイレクト設定を記述します。

/*    /index.html   200

これで、どのURLについても一度index.htmlを参照するようになるので、SPAで作成されたアプリケーションに有効です。

/public
├── _redirects
├── favicon.ico
└── index.html

最後に

Netlifyにはこの他にも、AWS Lambdaを簡単にバックエンドに出来るような functions や認証機能を提供するidentity、シンプルにA/Bテストを実施できるsplitsなど、どれも低コストで強力な機能な提供されています。公式ブログでも日々様々なアップデートが出ていて、とても楽しみなサービスです。

今回は、Shinjuku.LTのサイトで使っている 高機能ホスティングサービスNetlify について紹介させて頂きました。
Shinjuku.LT Advent Calendar 2018はまだまだ続きますので、よろしくお願いします!

28
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
mnuma
🚀 Web Application Engineeeeer

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
28
Help us understand the problem. What is going on with this article?