1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Gridsome入門 SPAを作ってみよう 【9日目 デプロイ編】

Posted at

スケジュール

前提条件

  • node.js v8.3以上
  • yarn or npmが入っている(Document見るとyarnの方が推奨とのこと)
  • Gridsomeのプロジェクトを作成している

Gridsomeプロジェクトをデプロイする方法

https://gridsome.org/docs/deployment/
Netlifyなどを利用して静的サイトをホスティングする方法やAWS S3を利用する方法などが紹介されています。
今回は一番簡単そうなNetlifyを利用してやってみました。

まずはGithubへリポジトリを追加

git init
git add .
git commit -m 'first commit.'
git remote add origin https://github.com/Dev-kenta/asset-management-app.git
git push -u origin master

NetlifyとGithubを紐付け

こちらの記事が大変参考になりました。
https://qiita.com/sugo/items/2ee64887d682b0dae635
まずはNetlifyにアクセスして、Get started for free を押します。
image01.png
こんな画面になるのでNew site from Gitを押します。
image02.png
Githubとの認証を済まして、Continuous Deploymentの箇所でGithubを選択します。
image03.png
ホスティングするリポジトリに先ほど作ったものを指定。
image04.png
Build command: gridsome build
Publish directory: dist
を指定してDeploy siteを押すと、ホスティングが開始されます。
少し待つとサイトがホスティングされて見れるようになります。
ドメインを設定するまでは自動でNetlifyが振り分けたドメインで見ることが可能です。しかもちゃんとhttpsで見れます。
https://priceless-kowalevski-8debd2.netlify.app/
あとは更新したらGithubにpushすると自動的にコンテンツが更新される仕組みですね。便利。

あとがき

ついにデプロイまできました。Netlifyでデプロイする方法が予想以上に簡単で驚きました。
ドメインを設定するのも簡単であればやってみようかな。
そしてついにお休みも終わり。明日からは日常が始まる。ひええ。

1
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?