【GitHub Actions】Next.jsプロジェクトを自動でビルド→EC2にデプロイする仕組み作ってみた - Qiita
はじめに こんにちは、皆さんは普段どうやってデプロイをしていますか？ オンプレ、AWS、GCP…デプロイ先の環境は様々だと思いますが、デプロイが自動化されているプロジェクトの方が多いのではないでしょうか。 自分も仕事の環境ではAWSに自動でデプロイされる仕組みになっています。 今日はそんな仕組みを個人開発環境にも導入してみようかと思います。 設計 ▼デプロイするもの この記事で作成したTodoアプリ（Next.jsで静的なwebアプリ） ▼デプロイ先 AWSのEC2 ▼CI/CDツール GitHub Actions ▼デプロイの流れ 対象リポジトリのmainブランチにpushされたら、ビルドが実行され静的ファイルをEC2にデプロイする Github Actionsとは github上の様々なアクションをきっかけに、あらかじめ設定しておいた動作を行ってくれる機能です。（雑まとめ） なのでma
【AWS Amplify Studio + Figma + React】Amplify StudioとFigmaを同期してReactコンポーネントを自動生成する手順 - Qiita
【AWS Amplify Studio + Figma + React】Amplify StudioとFigmaを同期してReactコンポーネントを自動生成する手順AWSフロントエンドReactamplifyfigma 先日、AWS Summit Tokyoに行ってきました！とても楽しかったです。 私はフロントエンド実装が大好きな生き物なので、AWSのブースで紹介されていた、Amplify StudioをFigmaと同期することでReactコンポーネントを自動生成できる機能に感動しました。 ブースにいたAWSの方に機能の紹介をしてもらい、帰宅後に自分でもやってみましたが、結構苦戦しました...。なんとかコンポーネントを表示するところまではいけたので、いつか利用する時にまた躓かないように手順をまとめてみました。この記事がどこかで誰かの役に立てると幸いです。是非ご覧ください(^｡^) AWS
GitHub ActionsでAmazon S3にReact appをビルド、デプロイする - Qiita
name: deploy-react on: push: branches: [ "main" ] jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [18.x] steps: - uses: actions/checkout@v3 - name: Configure AWS Credentials uses: aws-actions/configure-aws-credentials@v1 with: aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} aws-region: ${{ secrets.AWS_REGION }} - n
[Cloudflare Pages+Next.js] AWS SDK for JavaScript v3を使ってDynamoDBからデータ取得して表示してみる | DevelopersIO
[Cloudflare Pages+Next.js] AWS SDK for JavaScript v3を使ってDynamoDBからデータ取得して表示してみる どうも！オペレーション部の西村祐二です。 最近、Cloudflare、Next.jsをさわっています。 Next.jsをCloudflare Pagesでホスティングして、DynamoDBからデータを取得するところまでいろいろハマりながら手順がわかったので、備忘録兼ねてまとめておきます。 DynamoDBからデータを取得する処理はNext.jsのAPI Routesを使ってAPIを実装し、Edgeランタイムの設定を行い、CloudflareのEdge側で動作させる方針です。 https://nextjs.org/docs/api-routes/introduction 前提条件 AWS側の初期設定やwranglerの初期設定は完了し
![[Cloudflare Pages+Next.js] AWS SDK for JavaScript v3を使ってDynamoDBからデータ取得して表示してみる | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/1c4e9e28c189ba0da5e90990edaca836faea81b5/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F06%2Fcloudflare-1200x630-1.jpg)
AWSでNext.jsをSSRモードで動かしたい場合の選択肢 - Qiita
AWSでNext.jsをSSRモードで動かす方法について、社内で相談があったので、思いつく選択肢を挙げてみました。 Next.jsのSSRモードは、基本的にNode.jsが動く環境をつくれば動くと考えて良さそうです。 AWSでの選択肢 EC2 オススメ： ★★ 選定理由： 複数プロセスを起動したいなど、コンテナでは難しい場合 ECS オススメ： ★★★ 選定理由： バックエンドのAPIなどでECSを使っているのであれば フロントエンドからRDSを使うならVPC内に立てるための選択肢としても◎ Copilot CLI で ECS を立てる オススメ： ★★ 選定理由： ECSをお手軽に立てたい 立て方の違いだけ EKS オススメ： ★★ 選定理由： バックエンドのAPIなどでEKSを使っているのであれば Node.jsの環境をつくれば動く Lightsail オススメ： ★★ 選定理由： A
Nextjsで作成したWebサイトをCloudFront+S3で公開する - Qiita
はじめに 今回はNextjsを静的出力し、S3に格納、CloudFront経由で公開までをやってみようと思います。 基本的にAWSの操作はマネジメントコンソール上で行い、CICDの設定や、CloudFormationなどは行いません。 Nextjsのプロジェクトを作成 サクッとNextjsのプロジェクトを作成します。 npx create-next-app@latest --typescript What is your project named? ... static-app Would you like to use ESLint with this project? ... Yes Would you like to use `src/` directory with this project? ... Yes Would you like to use experimental
【 Amplify】React開発でAWS Amplifyを使ってみた - Qiita
root/ ┝ main/react/ ┝ src/ ┝ components/ ┝ assets/ ┝ components/ ┝ index.tsx ┝ App.tsx ┝ node_modules ┝ public/ ※細かい部分は省略 構築方法（React） 使い方は公式を見るのが早いと思う。 https://aws.amazon.com/jp/getting-started/hands-on/build-react-app-amplify-graphql/module-one/ かなり簡単なので、ここでは概要のみ。 Githubと連携 フロントエンドのビルド設定の確認 ビルドのボタン押す ハマったとこ 上記の2番で少しハマった。 ビルド設定用ファイル（amplify.yml）は自動的に作成されるが、そのまま実行するとうまくいかなかった。 ※デプロイまでは完了したが、ドメインにアク
【Next.js,microCMS,AWS】 ポートフォリオサイトを作ってAWS サーバーレスアーキテクチャでデプロイ - Qiita
【Next.js,microCMS,AWS】 ポートフォリオサイトを作ってAWS サーバーレスアーキテクチャでデプロイS3TypeScriptCloudFrontNext.jsmicroCMS はじめに エンジニアを目指し始めて初のポートフォリオサイトを作成しました。 背景としてはインターンを始めて実務につく機会をいただき、本格的な制作物を作れるようになってきたので、形に残したいと思いポートフォリオサイトを作成することを決意しました。 また今後お仕事を自分で獲得したいと考えており、そのために本格的に準備を進めたいと思いました。 まだまだ未熟ですが見て頂けると幸いです。 使用した技術 Next.js TypeScript tailwindcss microCMS AWS S3 AWS CloudFront GitHub Actions figma 制作ポイント デザイン デザインを考える上で
DockerでRails+React+dynamodb-local環境をつくりたい - Qiita
FROM ruby:2.7.5 as base RUN apt-get update && apt-get install -y build-essential make RUN curl -fsSL https://deb.nodesource.com/setup_lts.x | bash - && apt-get install -y nodejs RUN npm install --global yarn RUN mkdir /app WORKDIR /app COPY ./backend/Gemfile /app/Gemfile COPY ./backend/Gemfile.lock /app/Gemfile.lock RUN bundle install COPY ./backend /app FROM base as dev services: app: build: ./do
React SPA 〜S3 Web hostingで環境変数を仕込む方法〜 - Qiita
はじめに この記事はcreate-react-appで作ったSPAをAmazon S3のウェブホスティングを使用して外部公開する際の環境変数の設定方法をまとめた記事です。 S3へデプロイしているサービスから環境変数を読み込む際、下記2点の壁がありました。 CDにGithubActionsを使用しているためnpm build時に.envファイルが無視されてしまう(.gitignoreに含めているため) AWS側でSystemManagerやSecretsManagerを使おうにもS3からの読み取りができない じゃあどうしたらいいの？に対する答えをこの記事でまとめていきます。 記事を書こうと思ったきっかけ 筆者は現在Fjord Bootcampで自作サービスの開発を行っているのですが、サービスのデプロイ先としてS3のウェブホスティングを使用しています。 はじめにで書いたように、本番環境で環境変
フルスタックのチャットアプリケーションをAWSとNext.jsで構築する | Amazon Web Services
Amazon Web Services ブログ フルスタックのチャットアプリケーションをAWSとNext.jsで構築する モダンなチャットアプリはリッチな機能を必要とします。これらの機能はファイルストレージ・リアルタイムの更新、そしてクライアントとサーバーの両方からデータを取得する能力が必要です。 従来、これは多くのサードパーティサービスをつなぎ合わせるか、カスタムソリューションの作成に開発時間を費やすことを意味していました。そして、この方法では市場投入までの時間が遅くなり、複数の障害点が発生します。 チャットアプリに必要な機能と、AWS が従来の問題点をどのように解決しているかを紹介するために、我々はリアルタイムチャットアプリケーションのサンプルを更新しました。このバージョンは、ローカルと AWS の両方でアプリケーションを完全に管理・制御することがいかに簡単かを強調するために再設計され
AWSを用いたフロントエンドモニタリング入門 ~Next.js編~ - ウェルスナビ開発者ブログ
こんにちは。ウェルスナビでソフトウェアエンジニアをしています水馬(@mizuma_t)です. 今回のテーマはフロントエンドモニタリングです。 みなさんフロントエンドのモニタリングは正しく行えているでしょうか？ 各ユーザの端末内で生した事象を正しくモニタリングするためにはサーバサイドとは異なる知見が求められます。今回は、AWS上でフロントエンドアプリケーション(Next.js)を運用するにあたってのモニタリングの知見をお伝えしたいと思います！ フロントエンドの「何を」モニタリングするのか？ ひとえにモニタリングといっても目的やサービスの特性に応じて期待されるモニタリングの範囲と意味合いが異なることが一般的です。 本記事では以下の項目に焦点を当ててAWSを用いたモニタリング手法について解説しています。 ユーザの端末内で発生したエラーを正しく検知できているか？ レンダリングサーバで発生したエラー
AWS SDK for JavaScript v3 x Next.js で DynamoDB に UpdateItem してみた | DevelopersIO
加えて、今回試す環境ではAmplifyのAuthenticatorを利用して認証していることを前提としています。詳細については以下のエントリもご参照ください。 API Routes で DynamoDB に UpdateItem する まずは、API Routes を利用して DynamoDB に UpdateItem するコードです。 pages/api/update-item-api.ts import type { Credentials } from '@aws-sdk/types' import type { NextApiRequest, NextApiResponse } from 'next' import { DynamoDBClient, UpdateItemCommand, UpdateItemCommandInput, UpdateItemCommandOutput
Amplify x Next.js の API Routes で AWSクレデンシャル情報を取得してみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 Amplify UI の Authenticator で認証をかけたアプリで、 Next.js の API Routes を利用しているときに「あー、AWSのクレデンシャル情報を利用したいなー！」と思うことはありませんか？私はあります。 例えば、API Routes で aws-sdk を利用して DynamoDB にアクセスするようなケースでは、DynamoDBClientにcredentialsを設定してあげる必要があるので、AWSのクレデンシャル情報が必要になってきます。 今回はこのAWSクレデンシャル情報の取得について書いていきたいと思います。 前提条件 今回試した環境は以下のとおりです。なお、利用している Amplify Hosting の関係でちょっとバージョンが古いです。 next ^11
React + Rails + AWS Fargate の構成を実現したい - 05 バックエンドのテスト整備編(RSpec) - Qiita
bundle exec rspec .F Failures: 1) Task#valid? タイトルがnilの場合 is expected to be falsy Failure/Error: it { is_expected.to be_falsy } expected: falsey value got: true # ./spec/models/task_spec.rb:16:in `block (4 levels) in <top (required)>' Finished in 0.03577 seconds (files took 0.72953 seconds to load) 2 examples, 1 failure Failed examples: rspec ./spec/models/task_spec.rb:16 # Task#valid? タイトルがnilの場合
Build fast React Native apps with AWS Amplify
Overview In this article, we will be building a mobile application with React Native using Expo SQLite adapter as a storage adapter for DataStore. By the end of the of article, you will be able to build a contact app using the SQLite adapter for storage as shown in the video below: Expo enables developers to create hybrid JavaScript applications from the comfort of their terminals. Expo has an ada
React + Rails + AWS Fargate の構成を実現したい - 01 バックエンド環境構築編(Docker + Rails) - Qiita
概要 本記事のゴール 以下を参考にDocker + Railsの環境構築を行う。 以下つまづいた点をメモする。 つまづいた点 1. Dockerfileの修正 参考のDockerfileだとエラーが発生したので、修正 FROM ruby:2.6.6 ENV LANG C.UTF-8 ENV TZ Asia/Tokyo RUN mkdir /app WORKDIR /app ADD Gemfile /app/Gemfile - RUN apt-get update -qq && \ - apt-get install -y build-essential \ - libpq-dev \ - sudo \ - gem install bundler:2.0.1 + RUN apt-get update -qq + RUN apt-get install -y build-essential l
Next.js をAWSにデプロイする Amplify vs Serverless - ちょっと株式会社 社員ブログ
はじめにNext.js アプリケーションのデプロイ先の候補として Vercel が真っ先に挙げられますが、料金などの色々な都合でほかの場所にホスティングしたいこともあると思います。 SSG (Static Site Generation) で利用する場合は、幅広い選択肢がありますが、SSR (Server Side Rendering) と ISR (Incremental Static Regeneration) を使いたい場合の選択肢は、それほど多くありません。 AWSに SSR可能な Next.js アプリケーションをデプロイするメジャーな２つの方法 AWS Amplify と Serverless Next.js Plugin (Component) を紹介します。 サーバーレスなSSRとISRNext.jsのさまざまなレンダリング形態と特徴については、本記事では深掘りしませんが、
CDKでNext.jsのスタンドアロンモードでビルドしたイメージを AWS App Runnerへデプロイする | DevelopersIO
まえがき 前回は手動で、ECR、AWS App Runnerをデプロイしていましたが、CDKを使ってデプロイします。 Next.jsのスタンドアロンモードでビルドしたイメージを AWS App Runnerへデプロイする | DevelopersIO 動作環境 $ node --version v16.15.1 $ cdk --version 2.28.1 (build ba233f0) 今回つかったサンプルはこちらです app-runner-nextjs CDKセップアップ まだCDKのCLIがインストールされていないときはインストールとセットアップしておきます。 npm install -g aws-cdk cdk bootstrap CDKプロジェクトを作成 前回のサンプルにformationをディレクトリを作り、CDKのプロジェクトをつくることにします。 mkdir formati
Next.jsのスタンドアロンモードでビルドしたイメージを AWS App Runnerへデプロイする | DevelopersIO
まえがき Next.jsのスタンドアロンモードでビルドしたイメージを Cloud Run へデプロイする パク...リスペクト記事で、App Runnerでやってみました。 手順 今回つかったサンプルはこちらです app-runner-nextjs Next.jsのプロジェクト作成 npx create-next-app app-runner-nextjs --ts --use-npm Next.jsのスタンドアロンモード設定します next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, experimental: { outputStandalone: true, }, }; module.exports = nextConfig; スタンドアロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
