pavlog

ウェブエンジニアがあれやこれやを書きます

【簡単デプロイ】nowを使って簡単に自分のポートフォリオを公開する

こんにちは、pavです。 みなさん確定申告終えましたか?

3/15が締め切りなので、まだやってないとかいう人はいないと思います。

僕は普段業務でバックエンド寄りの開発 + PjMをしてるんですが、最近フロントエンドをしっかり勉強しないとまずいなという気持ちになってきました。

なので、勉強がてらポートフォリオサイトを作成することにしました。

いつも勉強する時に、初期構成をモリモリにしすぎて普通に挫折したり頓挫することが多いです。 なので今回は学びたい技術にフォーカスして、作りきること を目標にしました。

今回使う技術は React + Redux + TypeScript です。

まあここまで書いておいて残念ながら、フロント周りの話は今回一切出てきません。

また別の記事で書こうと思います。

目次

webサイトを公開するに当たってnowを使う

このブログもそうですが、作ったものを公開する時のスキームとか手順ってめっちゃ重要だと思ってます。 会社内での開発はリリースすることが前提なので、とくに問題ないですが…

個人で開発を行なうということはいかに「リリース作業が簡単か」ということが、継続にも繋がってきます。

以前は、高機能ホスティングで有名な netlify なんかを使って github pagesでブログ書いてたりもしたんですが結局運用が面倒臭くなってはてなに課金したんですよね。

Netlify: All-in-one platform for automating modern web projects.

今回はどうせだから新しい技術とか面白そうなものに触れてみようと思って、 now を触ってみることにしました。

zeit.co

普通に、ポップじゃないウェブサイトがめっちゃ好きです。厨二病なので。

The Global Serverless Platform

まあ、多分グーグル翻訳にかけると「グローバルサーバレスプラットフォーム」とか返ってきそうなわかりやすいキャッチです。 Globalって単語が特に好きです。

Our mission is to make cloud computing accessible to everyone.

かっこいいですね、誰しもがクラウドコンピューティングを利用できることがミッション。最高だ。

nowの初期設定

nowを初期設定していきます。

まず now を入れる。

❯ npm i -g now

nowコマンド打つと普通に deployされて焦る。普通に。困る。

新規アプリの作成

まあ、今回はreact-appを作るって言ったんで、 create-react-app にしておきますね。

now init しましょう。

❯ now init
> Select example:
  Abort
  apollo
  bash
❯ create-react-app
  docz
  express
  express-twitter-dreamify
  gatsby
  go
  go-image-to-ascii
  gridsome
  html-minifier
  mdx-deck
  mdx-deck-advanced
  monorepo
(Move up and down to reveal more choices)

create-react-app を選択したら、 ディレクトリ作成が完了しました。

> Select example: create-react-app
> Success! Initialized "create-react-app" example in ~/src/github.com/paveg/create-react-app. To deploy, `cd create-react-app` and run `now`.

appルートディレクトリに移動しておきます。

❯ cd create-react-app

うっかりデプロイできる

すごいんですよ、うっかり LJK; now ってコマンド叩くとデプロイされます。

~/src/github.com/paveg/create-react-app
❯ now
> Deploying ~/src/github.com/paveg/create-react-app under pavegy
> Using project my-react-app
> https://my-react-app-2dy554b80.now.sh [v2] [in clipboard] [3s]
┌ package.json        Ready               [1m]
├── asset-manifest.json (779B)
├── favicon.ico (3.78KB)
├── index.html (2.01KB)
├── manifest.json (306B)
├── precache-manifest.403868912749a458d8d1270e82ce54d6.js (606B)
├── service-worker.js (1.02KB)
├── static/css/main.a3566127.chunk.css (1.07KB)
├── static/css/main.a3566127.chunk.css.map (2.91KB)
├── static/js/main.7a406d4a.chunk.js (1.31KB)
├── static/js/main.7a406d4a.chunk.js.map (7.17KB)
├── static/js/runtime~main.229c360f.js (1.47KB)
├── static/js/runtime~main.229c360f.js.map (7.81KB)
├── static/media/logo.5d5d9eef.svg (2.61KB)
├── static/js/1.9a03d35e.chunk.js (117.57KB)
└── static/js/1.9a03d35e.chunk.js.map (337.32KB)
> Success! Deployment ready [1m]

my-react-app-2dy554b80.now.sh

まあ、LJKでもなんでもないんですけど。

エイリアス貼る

zeit をそのまま使ってると project_name - hash でurlが決まるんですよね。 ドメインもzeitで買えたりはするんですけど、 ぶっちゃけ portfolioで集客して アフィリエイトとかそういうのアレじゃないですか。 面倒臭くないですか?まあ俺は面倒臭いんですけど…

そこでエイリアス機能です。俺みたいな面倒臭がりにぴったしなんですよね。

❯ now ln pavlog # now alias pavlog
> Assigning alias pavlog to deployment portfolio-jc530tm8h.now.sh
> Success! pavlog.now.sh now points to portfolio-jc530tm8h.now.sh [4s]

ln or aliasコマンドでエイリアスを貼れます。

https://pavlog.now.sh/ (作りかけのサイトです)

これはすげえや。

now、まずかっこいいし。 俺もnowになりたい…

まとめ

〜なう という死語を叩くだけで簡単にデプロイできる。

最初は真面目に書いていたんですが、久しぶりに家でお酒飲んでしまってそれどころじゃありませんでした。

あ、でも now は本当に便利だと思うのでぜひ使って見てください。 ブルーグリーンデプロイとかできるようなので。

zeit.co

寝ます。