【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
3分でお手軽にReactアプリをGithub Pagesにデプロイする方法🍞 - Qiita
Reactアプリを作成できたが、どうやってデプロイ（公開）すればいいのだろう。。。？ 今回は、GitHubが提供するGitHub Pagesというサービスで Reactで作成したアプリをGitHub Pagesにデプロイする手順をご紹介します。 必要なもの（前提条件） Node.jsとnpmがインストールされた開発環境 GitHubアカウント GitHub PagesにデプロイしたいReactアプリ 手順 Githubリモートリポジトリを作成 まず最初に、Reactアプリを保存するためのGitHubリモートリポジトリを作成します。 このリポジトリは公開（Public）リポジトリにして下さい。 gh-pagesをインストール GitHub Pagesと連携するパッケージgh-pagesをインストールする必要があります。 以下のコマンドを実行してインストールしましょう。 package.jso
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
React × TypeScriptの環境をつくったので、次はGit連携した - Qiita
Gitで管理しよう これの続きと言えば続き →躓きながら、React × TypeScript環境を構築した話 Reactの環境を作るときの、npx create-react-app . --template typescriptこのコマンドのあとのディレクトリは以下になっていた。 zombie@DESKTOP-JLU30CD:~/working/typescript_mk2$ npx create-react-app . --template typescript drwxr-xr-x 6 zombie zombie 4096 Apr 4 13:27 . drwxr-xr-x 6 zombie zombie 4096 Apr 4 13:37 .. drwxr-xr-x 8 zombie zombie 4096 Apr 4 13:39 .git -rw-r--r-- 1 zombie zo
Deploying REACT+VITE website in Github Pages | DevelopersIO
Create Vite+react Website Introduction Recently I learned how to deploy React+Vite website to Github pages.So These are the steps I followed to deploy my application to Github pages. Setting up the application Let us create the basic website of react in vite project yarn create vite Enter the name of your project Select React framework Choose the language variant., here I chose Typescript After se
初心者がGitの使い方を学べて挫折を防ぐサービス"GIT USED TO"を自分のポートフォリオとして作ったので紹介させてください【Rails api/react/typescript/Docker/CircleCI/aws Fargate/cloudfront】 - Qiita
初心者がGitの使い方を学べて挫折を防ぐサービス"GIT USED TO"を自分のポートフォリオとして作ったので紹介させてください【Rails api/react/typescript/Docker/CircleCI/aws Fargate/cloudfront】RailsAWSDockerポートフォリオReact はじめに この記事を開いてくださりありがとうございます。 今回プログラミング初学者である自分のポートフォリオが完成したので紹介させていただこうと思い、今回投稿しました。 今回の記事はreadmeに記載した内容になりますが、お読みいただけたら幸いです！ まだまだ修正すべき点などが見つかるかと思いますが、よければぜひGIT USED TOを使ってみてください！ GIT USED TO GITトレーニングサービス "GIT USED TO"とは、プログラミング超初心者を対象に現在エン
React開発者のためのGitワークフローとGitHubセットアップ (和訳) - Qiita
Professional React Development 2022年に最も普及するReactの技術スタック Screaming Architecture - Reactのディレクトリ構成を進化させる プロフェッショナルなReactプロジェクトの立ち上げ方 React開発者のためのGitワークフローとGitHubセットアップ (こちらの記事の和訳です) 一人で自分のプロジェクトに取り組んでいる開発者の場合、Git のワークフローはたいてい単純なものです。毎日毎日、メイン (あるいは master) ブランチで作業していることでしょう。 プロの開発者チームがこのように機能していないことは、皆さんもご存じでしょう。複数の開発者がひとつのブランチにコミットしていると、すぐに混乱してしまいます。そして、未レビュー・未テストのコードが最終的に本番環境に入ってしまう可能性が高いのです。Danger!
GithubPages（.github.io）にWindowsPCでReactを使ってデプロイする方法 - Qiita
↓このページを参考にして デプロイしようとしていたんですがMacのようで、うまくいかなかったので、Windowsユーザーの場合を書いてみます。 多分Macとはコマンドが違うんだろうと思います。 "dependencies": { "homepage": "https://＜Githubアカウント名＞.github.io/＜リポジトリ名＞/" }, "scripts": { "del": "del -rf docs", //"del": "cmd /c rd /s /q docs", かもしれない? "move": "move build docs", "git": "git add . && git commit && git push origin master", "deploy": "npm run del && npm run build && npm run move && np
5分くらいで作るReact+GitHub Pagesの自動デプロイ環境 - Qiita
name: Build and Deploy on: push: branches: [master] permissions: write-all jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [18.x] steps: - name: Checkout uses: actions/checkout@v3 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} cache: "npm" - name: Build run: | npm ci npm run build - name: Deploy uses: pe
How to Deploy a React App for Free With GitHub Pages
If you have a project and want to host it for free without buying a domain, using GitHub Pages is a great choice. GitHub Pages converts your repositories into websites and allows you to host unlimited project sites. Deploying a React site with navigation requires extra configuration compared to deploying a static site. This tutorial walks you through the whole process from creating a GitHub reposi
GitHubからcreat-react-appしたアプリをクローンし別のPCで起動する方法 - Qiita
同じアプリを自宅用のPCと外出用のPCで作業を行いたい 私は自宅用のPCと外出する時用のPC2つを持っていますが、 アプリを開発する際、GitHubを利用してそれぞれのPCで作業を行いたい。 家で作業をし、外出する前には書いたコードのプッシュを行い、外ではそのプッシュしたソースコードを外出用のPCにプルしてきて続きをやりたい。 そんな時にエラーが発生した。 実際のアクション 自宅用のPCでcreate-react-appを行いアプリの雛形を作成 外出用のPCではReactの環境構築が住んでいることを前提とする この時自宅用のPCから外出用のPCで作業を行いため自宅用のPCで作成したアプリをGitHubにプッシュする その後外出用のPCに先程プッシュしたアプリをクローンする。 実際にアプリが起動するか確認を行う。 するとアプリが起動できずエラーが出るので今回はその対象方法を記述する 解決方法
ReactをGitHub Pagesにデプロイしよう - Qiita
追記(2023.11.11) reactの環境をdockerで構築したいという場合は2023年11月に寄稿したこちらの記事を参考にしてみてください。 今回の目的 Reactに取り組んだ際に、 「GitHub Pagesにデプロイできるんじゃね？」 と思ってトライしてみました。 その備忘録になります。 前提条件 MacOS githubアカウント取得済み Node.jsのバージョン：v16.14.0 npmのバージョン：8.3.1 (2023年3月追記) この記事ではnpxでプロジェクトを作っています。 その後にも近しい記事を書いていて、viteを使ったバージョンです。 viteとは、2020年にリリースされた新しいフロントエンドのビルドツールです。 viteを使った場合のGitHub Pagesへのデプロイに関する記事も書いていますのでこちらもよければ参考にしてみてください。 Reactを
Create React App 4.0 Alpha Testing
README.md Create New App JavaScript Template npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app TypeScript Template npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app Update Existing App To update an existing app you can change the react-scripts version in package.json to next and then run yarn or npm install Changes You can
AWS CodePipelineでReactをs3に保存してCloudFrontで公開する手順 - Qiita
システム構成 以下の様なシステム構成イメージで準備します。 Branch:productionへのPR mergeが完了したら、Githubに設定されているwebhook経由でCodePipelineを呼んで、最終的にs3にReactのソースを保存します。 そして、CloudFront経由でアプリをブラウザーに起動する様にしておきます。 Githubにレポジトリを作成 Reactの準備がされている前提で、まず、Githubにリポジトリを作成し、必要なソースコードをプッシュしておきます。 productionブランチを作成 Branch:masterからBranch:productionにPull Request(PR)がマージされた時に、CodePipelineを呼んで本番化をしたいので、productionブランチを作成しておきます。 Branch:masterにproductionと入
Rust x WASMのyewでTodoAppを作ってみた - console.lealog();
話題になってたのは去年くらいな気もするし今さら感はあるけど、今だからこそすごい化けてたりしないかなーという期待も込めて。 個人的には、WASMでWebアプリを作る時代になるとはあまり思えてないけど、まぁ試しておく価値はあるかなと思いその学びをメモ。 yewstack/yew GitHub - yewstack/yew: Rust / Wasm framework for building client web apps RustでReactっぽいコードが書けて、それがWASMで動くので、型ありでちょっぱやなWebアプリが作れるぜ！っていうやつ。 今のバージョンは`0.11.0`で、最小のコードはこんな感じ。 use yew::{html, Callback, ClickEvent, Component, ComponentLink, Html, ShouldRender}; struct
eslint-plugin-reactへのコントリビュートに挑戦してみた ~1月の活動を振り返る~ - toshi-toma blog
eslint-plugin-reactへのコントリビュートに挑戦してみた 今年からある程度まとまった単位で活動をブログなどの記事としてアウトプットしておくことで、それを使った振り返りができるように意識しています。 2020年もはや1月が終わり、どんなことをしてたか振り返るとeslint-plugin-reactへのPR作成に時間を使っていたのでまとめを書きます。 eslint-plugin-react GitHub - yannickcr/eslint-plugin-react: React specific linting rules for ESLint eslint-plugin-reactはESLintのプラグインの1つで、React用のルールが用意されています 有名なESLintのconfigであるeslint-config-airbnbなど、様々な場所で利用されています 最近は
2020 年の React Native 開発 - tomoima525's blog
2019 年は React Native にとってはさまざまな変化があったので、それらを振返りつつこの記事では最近の React Native をめぐる状況と個人的見解について書きます。採用を検討している方、Flutter などのクロスプラットフォーム開発フレームワークと比べたいという方の参考になれば幸いです。 フラットに書くことを意識していますが、いち利用者としてのバイアスがあることをご了承ください。 開発体験 Fast Refresh Auto Linking CocoaPods の標準採用 Expo によるワンストップ開発環境構築 フレームワーク/アーキテクチャ Lean Core Android 最新の React への追随 コミュニティ What do you dislike about React Native? react-native-community 管理下のライブラリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A react native app that lists the most starred Github repos that were created in the last 30 days
How to Deploy React Apps to Github
React Native CI/CD using GitHub Actions - LogRocket Blog