Ken @m3ssy_ken 筑波大学「ごめん!システムメンテで使えません」 最強新入生「代わり作りました」 ぼく「???????????」 2021-04-11 01:29:06
仕事で Netlify にデプロイしたSPAの読み込みが遅いので原因を調査してほしい、という依頼を受けてウェブパフォーマンス調査を行った。顧客から許可をもらって、この記事ではNetlifyに対してどういう調査をしたのかを書く。 結論だけをまず書くと、NetlifyのCDNのファイル配信パフォーマンスは日本国内からだと非常に悪い。パフォーマンスを改善させるためには、Netlifyに直接アクセスさせるのではなく、前段に他のCDNやキャッシュサーバを挟んだりするほうがいいだろう。 調査の前提 日本国内からのみの調査 サイトには静的なファイルをデプロイしているのみ 該当するNetlifyにデプロイしたSPAをブラウザで試しに開いてみると、確かに初回の読み込みのパフォーマンスがめちゃくちゃ悪い。 Chrome Devtoolsを開いてネットワークタブでどういうふうにリソースの読み込みを行っているのか
本資料について 本資料は日本大学文理学部情報科学科の開講科目「Web プログラミング」の教材として作成されました。本資料は下記のライセンスの範囲内で、当授業以外でも自由にご利用いただけます。 対象読者 本資料は、以下の教材を学習済み、もしくはそれと同等以上の知識を持っていることを前提としています。 React チュートリアル:犬画像ギャラリーを作ろう 基本情報技術者試験レベルの関係データベースの知識 本資料で学ぶこと 本資料では以下の内容を学びます。 Express と Sequelize による API サーバー開発 React と API サーバーの連携 Cross-Origin Resourcer Sharing React によるルーティング Auth0 によるユーザー認証 Heroku による API サーバーの公開 ライセンス この作品はクリエイティブ・コモンズ 表示 4.0
最近以下のような記事で個人開発のコストの話をよく見かけて、ちょうど自分も個人サービスをコストカットのためにVPSからほぼ無料なスタックに移行していたので構成とかを書いてみる。 前提としてはこんな感じ。 仲間内で使ってるだけのWebアプリケーション。月イチくらいしか使わない 技術スタックは技術的な実験とか学習を兼ねているので多少オーバースペックになるのはいい お金はなるべくかけたくない 移行前のスタック フロントエンドはNuxt.js、Netlify バックエンドはRailsでgRPC、envoyを噛ませてフロントエンドからはgRPC-Webで呼んでる VPS上にバックエンドのアプリケーションとDB(postgres)を動かしてる バックエンドは普通のRailsアプリにしてHerokuにするのが一番楽でお金もかからないんだけど、gRPC-Webを試してみたくて、そうするとproxyが必要にな
https://www.netlify.com/pdf/oreilly-modern-web-development-on-the-jamstack.pdf Netlify社が2019年に公開した本?PDFです。 せっかくJamstackの会社に入ったので、読んでおかないといけない気がして。 あとJamstackは人によって解釈が違ったりするとし、Jamstackの真髄について知っておきたいですよね?と思い。 ただこれなんと127ページもあるんですよね〜。 全編もちろん英語なので、読むのも中々に大変ですよね〜。 てなわけで、ざっくり訳してまとめまておきました。(それでも長いけど) はじめに ここ最近のWebの進化はすさまじい ブラウザもJavaScriptもパワフルになった その分ユーザーの要求も増える やることが増えると処理は遅くなる 遅いページは見向きもされないモバイル当たり前の世界だ
例えばmain.tsというスクリプトに対して、ファイルの読み取りだけを許可したい場合は、以下のようにコマンドを実行します。 $ deno run --allow-read main.ts このときmain.tsプログラムはファイルの読み取りだけが可能になるため、ファイルの書き込みやネットワークアクセスをするとPermissionErrorによる実行時エラーになります。 なお、実行時にフラグを何も与えなければ、どの権限も持っていない状態になります。 各フラグにはパラメータを指定でき、例えば次のように実行すると/home/userディレクトリの読み込みだけが許可されます(--allow-writeフラグも同様)。 $ deno run --allow-read=/home/user main.ts また、--allow-netを次のように指定すると、特定のドメインとポートだけのアクセスを許可で
最近話題のVercelを試してみました。競合のNetlifyと同様に、ビルドとホスティング他をまとめてやってくれます。Netlifyと比べて1人で開発をするならほぼフル機能が使えますし、無料プランのままでも100回/日までデプロイできるのが利点です。 前提 Next.jsと親和性の高いVercelですが、今回アプリはGatsby + Contentfulで構築しています。 詳しくは過去に書いた記事がありますので、下記の「1. Contentfulの準備」「2. Gatsbyアプリの立ち上げ」を参考にしてください。 CircleCI × Contentful × S3で作るJamstackなブログ環境。 また、Githubリポジトリを作成し、masterにソースコードをプッシュしておきます。 Vercelにアプリをデプロイする https://vercel.comにアクセスし、「Sta
Vercel VercelはNext.jsなら特に設定しなくともSSRができる状態でデプロイできる。Nuxt.jsだとコミュニティが用意しているbuilderを使えばSSR対応アプリをVercelにデプロイできる。builderが用意されていないフレームワークでSSRを行うにはデプロイ周りで頑張る必要が出てくる。 VercelではちょっとしたWeb APIを用意したいときも、/apiディレクトリを用意してJSファイルなどを置いておけばまとめてデプロイしてくれる。 Netlify サーバーサイドで動かしたいスクリプトはNetlify Functionsで動かすことになるが、フレームワークごとに用意されているプラグインを使うことでまとめてデプロイができたりする。例えばnetlify-plugin-nextjsを使えばNext.jsでSSR対応したアプリを動かせるっぽい。またnetlify.to
先日、こんな記事を見かけました。 テックブログは続かない - note.com 採用目的でテックブログを始めたものの、時間の経過とともに古い記事ばかりになる or すでに退職している社員の記事ばかりになる…というのはよく見かける光景です。 目の前のタスクが積み上がっている状況で、業務時間内にブログを書く時間を取るのはなかなか難しいと思います。 そうは言っても業務時間外に無償で会社のブログに書くのもなかなか気乗りしません。「数年以内に転職するかもしれない」という気持ちがあればなおさらです。記事が転職しても自分のものとして残るのであれば、書くモチベーションは上がるのかもしれません。 その後、こんなツイートを見かけました。 企業のテックブログと言えば「会社がひとつブログを作って、みんなでそこに投稿する」という形が当たり前になっていますが、たしかに個々人の投稿を集約する場所を用意するだけでも良いの
JAMスタックのNetlify、Denoを採用したサーバレス環境「Netlify Edge Functions」ベータ公開。Deno Deployの分散エッジでNext.js/Nuxt/SvelteKit/Remixなど実行 Webホスティングサービスを提供するNetlifyは、Denoを採用した新しいサーバレス環境「Netlify Edge Functions」をパブリックベータとして公開しました。 We know some of you have been on the edge of your seats for this one, but the wait is over because Edge Functions is here! Learn more about how you can leverage our edge network to deliver faster s
Student FacuetというDapp(Web3アプリ)を作成したら結構人気が出たので、技術面から運用面までを軽くまとめました。わかりやすくするために多少語弊がある表現ある場合がありますが、ご了承ください。 Githubリポジトリ: https://github.com/inaridiy/AStar-Student-Faucet 自己紹介 Crypto Age所属のinaridiyというものです。 Web歴は2年、Web3歴は3ヶ月の高校2年生です。普段はハッカソンに出たり、個人開発をしています。 Faucetとは 現状、ブロックチェーン間で資産を移動させたい場合、移動元のガス代と移動先のガス代がかかります。つまり、資産を動かす前に移動したいチェーンの通貨が必要になります。 これはかなりUXを損なう行為ですし、仮想通貨取引所を開設できない未成年などは、そもそも資産を移動することができな
ポートフォリオサイトをNuxt + Netlifyに移行しましたWordPessで作成していた私のポートフォリオサイトをNuxt JSで作り変えてみました。デザインや内容はそのままで、管理体制を変えた感じですね。Nuxtに移行した理由や悩んだところをまとめてみます。 移行を決めた理由元々私のポートフォリオサイトは、まだ私が学生だった頃に WordPress の勉強用に作ったものです。その後何度かリデザインしながら公開していました。ブログなどはつけておらず、制作物の紹介を投稿記事として扱っていました。ただ、制作物は更新する頻度も高くはなく、WordPress でなくてもいい気がしてきていました。また、WordPress や PHP のバージョンを上げるたびにエラーを出すプラグインの対応に疲れてきていたところでした…。 そんな中出会ったのがGatsbyや Nuxt といった 静的サイトジェネレ
Layer0というJamstackプラットフォームを試してみた記事です。 Jamstackプラットフォームが何かは表現しにくいですが、Netlify、Vercel、Cloudflare PagesみたいなSPAなアプリケーションとかをホスティングしてくれるサービスです。 Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる Layer0はMoovweb XDNという名前のプロダクトでしたが、2021年4月にLayer0へリブランディングしています。 Moovweb is officially Layer0! 📝 XDN = Experience Delivery Network Layer0は、Netlify、Vercel、Cloudflare PagesのようにSPAアプリケーションをホスティングできるプラットフォームです。 他のプラットフォーム
JAMスタックのNetlify、静的サイトジェネレータ開発元のGatsby買収を発表。Webサイトホスティングサービス強化へ Webサイトのホスティングサービスを提供するNetlifyは、静的サイトジェネレータGatsby.jsの開発元であり、GatsbyをベースにしたWebサイトホスティングサービスを提供しているGatsbyの買収を発表しました(Netlifyの発表、Gatsbyの発表)。 We’re thrilled to announce that we have acquired Gatsby Inc.! Together we will build the future of composable, and empower developers with flexibility and choice in building composable web experiences.
静的コンテンツのホスティングサービス「 Netlify 」では、無料枠の範囲で独自ドメインの利用が可能です。 今回は Netlify に独自ドメインを設定する方法 について解説したいと思います。 目次 目次 はじめに 簡単な流れ カスタムドメインの設定 Netlify での設定 DNS 設定 サイトチェック まとめ はじめに 本記事では、以下の記事で公開したページをベースに解説を進めていきます。 Netlify + GitHub 環境で簡単にサイトを公開する方法 まだ Netlify を利用していない、または、独自ドメイン設定用のサイトがない場合は、上記のページを参考にサイトを公開してください。 簡単な流れ 本記事では、以下のような流れで解説を進めていきます。 Netlify でドメイン追加設定 DNS プロバイダで CNAME レコードを追加 サイトチェック まとめ それでは、早速、Ne
You’ve built your Next.js site and now you want to put it online for the world to see. Which platform is the best to host it? In this article, I’ll describe Next.js specifics when it comes to deploying and hosting, introduce the four most common steps in publishing a Jamstack website, and use them to compare the four most popular hosting providers. Next.js specifics in deployment Next.js is a Java
Gatsby製サイトをNetlifyにデプロイする前に見ておきたい設定2つ(ビルドと表示)2020-08-03 12:00 Netlify にはビルド時のキャッシュと HTTP のキャッシュをユーザー側で設定できる口があります。 このキャッシュの設定をすることで、ビルドや表示が早くなり良いこと尽くしなのでこれを気に見ていきましょう。 ビルド高速化 Netlify ではビルドを回すとソースコードを見て 0 からビルドします。 そのためキャッシュが使える手元でのビルドに比べて時間がかかります。 特に gatsby-image は致命的で、画像から圧縮・Traced SVG の作成・サムネイル化・各種デバイス向けの最適な画像出力を行うため、画像が絡むサイトのビルド時間はとても長くなります。 このブログもそういった画像をつかったブログですが、現在 20 記事あるサイトでのビルドで約 10 分かかっ
こんにちは、株式会社カミナシのエンジニア @tomiです。 前回、「サービスサイトをGatsby×Wordpress×NetlifyでJamstackなサイトにリニューアル」という記事を書き、たくさんの反響をいただきました。ありがとうございます。 kaminashi-developer.hatenablog.jp 今回は、Gatsby・Wordpress・Netlifyで開発したときの躓きについての話で、似た構成で開発される方の役に立つと思います。 逆に、違う構成の場合は、全くためにならない内容となっていますので、ご容赦を。 開発していて躓いたところ Docker上でWordpressからGraphQLでの記事の取得がエラーになる WordpressをGraphQLで読み込む際プラグインのバグがある Gutenbergのブロック作成に手こずった GutenbergブロックのTypeScri
今回は Netlify にステージング環境を追加する方法 について解説したいと思います! Netlify では、簡単にステージング環境を追加する事ができます。 GitHub と連携する場合であれば、GitHub にステージング用のブランチを追加して、Netlify の設定ページで公開用ブランチを追加するだけでステージング環境が出来てしまします。 おまけに、デフォルトでプルリクごとのプレビューも自動で用意されている という( ゚Д゚)ガクガク それでは、早速、Netlify にステージング環境を追加する方法を解説していきます。 目次 目次 はじめに 簡単な流れ GitHub リポジトリに staging ブランチを追加 Netlify で staging ブランチの公開設定 全てのブランチを公開する場合 個別にブランチの公開設定をする場合 ステージング用のページを確認! プルリクのプレビ
In this post We’re pleased to announce that Edge Functions is now available in public beta on the Netlify platform. Edge Functions enables you to run serverless JavaScript/TypeScript functions right from Netlify’s Edge network. It’s a full runtime environment, with complete control to transform requests and responses, stream server rendered content, or even run an entire application—all right from
2021.01.06 Next on Netlifyプラグインを使ってNext.jsのサーバ機能をNetlifyへデプロイする こんにちは。F.S.です。 近年、Webフロントエンド界隈ではJamstackによる静的サイトの生成(SSG)&ホスティングが盛んになってきている印象を受けます。筆者はReactの経験はあれどどちらかというとサーバサイドエンジニアをメインにやっていてSSGはそれほど明るくないのですが、サーバレスの潮流もあってこの分野に注目し始めました。 Jamstackサイトのホスティングについては、Jamstackというワードを生み出したパイオニアであるNetlify、Next.jsの開発元であるVercelがありますが、CDN等で著名なCloudflareも同機能を準備しているのではないかという情報もあります。 今回はバージョン10が登場して勢いがあるNext.jsで作られた
I’m excited to announce that Gatsby Inc. is joining Netlify in order to spread the growth of Gatsby and composable architectures across the entire web. To see how we got here, let’s start by rewinding back in time. Eight years ago, I was a front-end developer, and I fell in love with React. At the time, React was a tiny emerging framework for apps, but I wanted to build a website with it. So I too
Coolify is an open-source & self-hostable alternative to Heroku / Netlify / Vercel / etc. It helps you to manage your servers, applications, databases on your own hardware, all you need is SSH connection. You can manage VPS, Bare Metal, Raspberry PI's anything. Imagine if you could have the ease of a cloud but with your own servers. That is Coolify. No vendor lock-in, which means that all the conf
Today we’re excited to announce On-demand Builders, a new solution to improve build times for large sites on Netlify. Along with the proposal for Distributed Persistent Rendering (DPR), this release represents the first step forward in a significant evolution of the Jamstack architecture to support larger websites and faster development cycles—across any JavaScript framework. Reducing build times
Hello all ! As of May 1st 2023 Netlify Graph has been deprecated. We have received loads of feedback and after much consideration we have decided to discontinue support of this product. We will be focusing our efforts on enabling developers to build composable websites, stores, and apps with greater efficiency, and we look forward to what the future holds. Thank you for helping us be a part of our
こうして比較してみると、やはり後続なだけあってCloudflare Pagesの優秀さが目立つ。Netlifyに関してはフォームの設置を検討しないのであれば、Cloudflare Pagesより優先して採用すべき理由は特に見当たらない。ヘッドレスCMSとの連携はNetlifyの大きな利点だったが、つい昨日、Deploy Hooksなる新機能が発表され、Cloudflare Pagesでもじきに同様の運用が行えるようになった。 Firebase Hostingもかつては速度面での優位性があったが、既に関連のWebサービスがFirebase上で構築されていて、部分的に静的サイトを要する案件でもなければあえて使うメリットはなさそうだ。Firebaseの機能はあまりにも膨大すぎるせいか、ブログ用途ではかえって煩雑さを招いている節が否めない。その点、Cloudflare Pagesの設定項目は上手く
2019年の1月からNetlifyの無料プランでブログを運用していたのですが、直近記事でEmacsの操作をわかりやすく伝えるため、富豪的にアニメーションGIFを多用した結果、無料枠のデータ転送量制限(無料プランは1ヶ月100GB)を越えてしまい、1日20ドルを請求されるようになりました。 もちろん、これは自分のミスなのでNetlifyは悪くないのですが、この制限を知らなかったのでいつからあるのか調べてみたらどうやら2019年の2月にアナウンスされていて、そりゃ知らなくても仕方ないよなと思いました。 制限超過の通知メール # Netlifyからの通知はこんな感じのメールがきました。 一番上にYou’ve got more room to grow!とか書いてあるから、何かいい話なのかなとか思ったけど、請求って書いてあるし何だろと思いながらダッシュボードを開いてみると、40ドルの請求と表示され
はじめにNetlify はとてもいいサービスです。Netlify は高機能なホスティングサービスです。このブログも Netlify を利用しています。 ある日、Netlify から 7 ドル請求されました。支払わないとサービスを停止すると言われました。 無料プランを利用していて、課金をした覚えはありません。 なんで勝手に課金したことになってるんだ。自分の意思じゃないから払う気なんか無い。 そう思っても、支払わないとこのブログが続けられなくなるという事実は変わりません。 そうして僕は 7 ドル支払いました。 当時のツイートNetlifyのビルド時間が上限の300分達してしまい、そのまま放っておいたら、いつのまにか500分プラスされていた。ラッキーと思ってたら7ドルの請求来た。「7ドル払ってね。じゃないとサービス停止してしまうよ」というメールも飛んできた。 どうやら自動で課金されるようだ。 —
Hey devs! We are super excited to share with you our latest build plugin in the Netlify ecosystem, to make it even easier to deploy Next.js apps onto Netlify! You may be familiar with our project next-on-netlify, a utility for enabling server-side rendering (and other functionality) in Next.js on Netlify. It wraps your application in a tiny compatibility layer, so that pages can use Netlify Functi
この投稿では、GitHubへのgit pushを引き金に、gitリポジトリ内の静的HTMLをNetlifyにデプロイし、サイトを公開する方法を紹介します。 本稿の手法は、Netlify入門者が分かるよう、下記のとおり極限まで単純化してます: 静的サイトジェネレーター不使用 「HTMLをgit pushしたら、Netlifyにデプロイできる」を体験することが本稿の目的です。なので、現実のサイト構築で使うことになる静的サイトジェネレーターは使いません。現実的なデモではないですが、HTMLをデプロイできることが知れれば、静的サイトジェネレータで生成したHTMLもデプロイできることになるので、ここで学んだことは活きます。 作るのはHTML1ファイル & Netlify設定ファイル1つ 作るファイルはHTML1つと、Netlifyの設定ファイル1つだけです。HTMLは__「Hello World」の
Edge Handlers Early Access Fast, personalized web experiences. Run custom code right from the network edge with incredible performance. A seamless part of your Netlify development workflow. Request access Questions? Talk to an expert Serve dynamic, personalized content instantly Supercharge your web apps with custom javascript logic that runs on the network edge. Modify each request to localize co
WordPressのウェブサイトを静的化し、Firebaseで配信する | marketechlabo Netlifyとは WordPressで静的サイトを生成し、Netlifyで公開する。Netlifyは 静的サイトのホスティング AWS Lambdaのような関数 フォーム などができる、サーバレスで何らかのサービスを配信するためのプラットフォームである。個人用途であれば大部分の機能を無料で使える(複数ユーザ、Basic認証などは有料)。 端的に言うと静的サイトの配信を無料でできるサービスである。リダイレクトや転送(リバースプロキシ)も可能でリスト形式で設定できる。動的コンテンツは別のサーバに設置してそこに転送するということも可能。独自ドメインも使用でき、自動でSSL証明書(Let’s Encrypt)も取得、適用、更新してくれる。これが無料とは至れり尽くせりである。 コンテンツのでデプ
Next.js×TypeScript×microCMS×MantineUI×Netlifyでブログを作成したのでまとめと感想 はじめに この記事は、タイトルに記載の通りの技術スタックで趣味の芝生管理用のブログを作成したので、簡単にまとめと感想を書いておこうと思います。 実際のブログはこちら GitHubリポジトリはこちら(参考になった方は🌟をポチッと🙏) ブログ作成の動機 普段業務でNextjs(React)を触っているがSSRする必要がないアプリケーションということもあり、ファイルルーティングの機能くらいしか触っていなかったため、SSGやSSRの機能をちょっと触っておきたかったのと、最近流行りのJAMStack構成をmicroCMSを用いて経験しておきたかったという2点が主な動機です。 あと、勤めている会社でホームページを作り直す話があがっていたので、JAMStack構成を提案するた
About five years ago, Netlify pioneered the concept of Deploy Previews. We learned a lot from emerging best practices in large development teams and created an automated workflow where every push to Git can generate a unique preview URL. While this made it much easier for teams to share progress, it exposed a new challenge: gathering feedback on that preview. It’s not uncommon for feedback to roll
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く