Next.js + Express.js + MySQL + Docker で簡単な Web アプリを作ろう！ - Qiita
この記事の対象読者 このチュートリアルは、以下のような人に向けたものです。 Webアプリを作ってみたい初学者 Node.jsを使ってみたい人 Next.jsを使ってみたい人 Dockerあんまりわかんない人 この記事のゴール Next.js（フロントエンド）＋ Express.js（バックエンド）＋ MySQL（データベース）＋ Docker（開発環境） を使って、超シンプルな Web アプリを作ります！ 前提条件 ホストOS: MacOS Dockerインストール済み エディタ:Cursor プログラミングの基礎はわかる データベースも少しわかる Dockerについて学びたい人は以下の無料の書籍がおすすめです。 今回の背景 Webアプリエンジニアとして半年が経ち、何かアウトプットを残したいと思い記事を書きました。今回は、AIコードエディタ Cursor を試してみたかったので、アプリのコ
Dockerを軽量化するマルチステージビルド(Next.jsとNest.jsのTypeScript開発) - Qiita
Dockerのマルチステージビルドとは Dockerfile内で複数のビルドステージを定義し、軽量な本番用イメージを作成するやり方です。これのおかげで大きなイメージ(例えば1.2GBなど)から、運用に必要な最小限のファイルだけを含む軽量なイメージ（例：100MB）にまで縮小することが可能になります。 Dockerって構築すると容量などが取られるのでそこがネックでしたが、それを解決する手法になりそうです。 メリット 不要なファイルやツールの排除ができ、転送・デプロイが高速になり最終イメージも軽量化できます。 デメリット Dockerfileの複雑化、中間ステージの内容が最終イメージに含まれずデバックが難しくなり、学習コストが増加します。 マルチステージビルドの仕組み 複数のFROM Dockerfile内に複数のFROMを記述することで、複数のステージを作成します。 ビルドステージ コンパイ
独学で未経験のモダンな技術を学習してポートフォリオを作るまで【Rails / Next.js / AWS / Docker / GitHub Actions】 - Qiita
はじめに こんにちは！きいな(@keynyaan)と申します。 今回、モダンな技術を使って初めてポートフォリオを作ってみたので、開発背景や学習教材などを紹介します。 ポートフォリオを作るにあたって、色々な方の素晴らしいポートフォリオ作成記事が参考になったので、今度は私の記事が誰かのためになることを祈ってます。 自己紹介 大学卒業後、新卒でSIer企業に入社し、3年ほどJavaやJavaScriptなどを使って、バックエンドやフロントエンドのシステム開発を行っていました。 そんな私が自社開発企業に興味を持ち、退職を機に、2023年1月からポートフォリオ作成に向けて学習を始めました。 学習期間は3ヶ月ほど、開発期間は5ヶ月ほどになります。 追記(2023年12月24日) 当記事投稿後に転職活動を行い、10月中旬頃にReactやGoなどを使っている自社開発企業から内定をいただき、12月からで正社
Next.jsの本番環境・開発環境をdockerで構築する方法 - Qiita
FROM node:18-alpine WORKDIR /app COPY package.json yarn.lock* ./ RUN if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ else echo "Warning: Lockfile not found. It is recommended to commit lockfiles to version control." && yarn install; \ fi COPY src ./src COPY public ./public COPY next.config.js . COPY tsconfig.json . CMD ["yarn", "dev"] 1行目: v18のnode上で作っていきます 3行目: 作業ディレクトリを指定します。 5行目: package.js
【独学】ポートフォリオ「コンビニレシピ」を作ってみた【Next.js / React / TypeScript / TailwindCSS / Ruby / Rails / Docker / AWS / Github Actions】 - Qiita
【独学】ポートフォリオ「コンビニレシピ」を作ってみた【Next.js / React / TypeScript / TailwindCSS / Ruby / Rails / Docker / AWS / Github Actions】RailsAWSTypeScriptDockerReact はじめに はじめまして、皆さまこんにちは！ この記事をご覧いただきありがとうございます。 「ふく（fuku01）」 と申します。 今回は、インターネットで調べた情報や教材を元に、独学でポートフォリオ「コンビニレシピ」を作成してみたので、当記事で紹介させていただければと思います。 なお、2023年4月からこのポートフォリオの開発を開始し、6月に終了しました。 目次 ポートフォリオ紹介 （１）概要 （２）使用イメージ （３）サービス開発の背景 （４）使用技術 （５）主な実装機能 （６）構成図など （７）特
Docker + React + TypeScript の 環境構築方法 - Qiita
version： docker-composeで使用するバージョンを定義する バージョンによって,docker-compose.ymlの書き方が変わる service： アプリケーションを動かすためのそれぞれの要素のこと frontend(services名は自由に決めていい)はアプリケーションを動かす 一つの要素であると定義される。 build： イメージの構成をDockerfileに記述して、自動でビルドしてベースイメージに指定する。 buildには、Dockerfileのファイルパスを指定する。 今回は同一フォルダ内にDockerfileが存在するため . となる。 environment： コンテナ内の環境変数を指定する。 Node.jsのグローバル変数: 開発用途なのでdevelopmentを指定します。 volumes： コンテナにボリュームをマウントするときにマウントする設
webアプリ「EChub」を作ってみた【FastAPI/React/AWS/Vercel/Docker/スクレイピング】 - Qiita
はじめに 当記事では、私が作成したwebアプリ「EChub」について紹介します。 自己紹介 2023年4月現在、私は地方国公立大学の修士2年生です。専攻は電気電子工学コースで通信に関する研究を、プログラミングによるシミュレーションによって行っています。研究の傍らwebアプリケーションの開発に興味を持ち、2022年10月から本格的にwebアプリの開発を始めました。 今回紹介するEChubの開発期間は1.5ヶ月です(2023年3月~4月半ば) 目次 EChubの機能について 使用技術について スクレイピングについて EChubの課題・改善点 1. EChubの機能について URL EChub 概要 複数のECサイト(現時点ではメルカリ・ヤフオク・ペイペイフリマ)の商品をまとめて検索できるというシンプルなアプリケーションです。キーワードを入力することで、バックエンド側が各ECサイトのページをスク
RubyAPI3、Rails7、React、Mysql8でDockerにて環境構築する方法 - Qiita
最初に SPAアプリケーションを作るために、環境構築をしました。今回の記事は環境構築の備忘録です。 バージョン Ruby:3.2.1 Ruby on Rails:7.0.4 MySQL:8.0.32 React:v18 docker-compose:v3.8 アプリケーションの基盤を作成 RailsとReact用のディレクトリを作成します。Railsにはbackendディレクトリ、Reactにはfrontendディレクトリを作成します。 mkdir practiceApp cd practiceApp mkdir backend mkdir frontend touch docker-compose.yml touch backend/Gemfile touch backend/Gemfile.lock touch backend/entrypoint.sh touch backend/D
Ruby on Rails / React / Docker の環境構築 - Qiita
はじめに Ruby on Rails + React の開発環境をDockerで構築する手順です。PC環境は windows(WSL2, ubuntu)です。データベースはMySQLを使っています。以下の操作は全てubuntu側から実行します。 前提 Docker Desktop がダウンロードされている必要があります。また、起動していないとDockerコマンドが使用できません。 ディレクトリ・ファイルの作成 mkdir myapp cd myapp mkdir backend mkdir frontend touch docker-compose.yml touch backend/Gemfile touch backend/Gemfile.lock touch backend/entrypoint.sh touch backend/Dockerfile touch frontend/D
DockerでNext.jsのアプリケーションを起動させる - Qiita
FROM node:16-alpine AS builder #node:alpineで不足しがちな共有ライブラリを追加 RUN apk add --no-cache libc6-compat WORKDIR /nextapp #匿名での情報収集を拒否する設定 ENV NEXT_TELEMETRY_DISABLED 1 COPY package.json ./package.json COPY package-lock.json ./package-lock.json COPY tsconfig.json ./tsconfig.json COPY next.config.js ./next.config.js COPY next-env.d.ts ./next-env.d.ts COPY public/ ./public/ COPY src/ ./src/ #package-lock.js
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js(TypeScript) × Docker(Compose V2) 最速構築Tips. - Qiita
【備忘録】Next.js開発環境をDockerで構築(WSL2) - Qiita
【環境構築】DockerでReactをnpmを使用して作成&起動する方法（TypeScript編） - Qiita
【環境構築】DockerでReactをnpmを使用して作成&起動する方法（JavaScript編） - Qiita
DockerでRails+React+dynamodb-local環境をつくりたい - Qiita
Dockerとdocker-composeを使ってReactのコンテナを作成してみよう！ - Qiita
【Docker】React+nginxを作る - Qiita
Rails&Docker&Reactの導入個人用メモ - Qiita
React and .NET Core 6.0 Sample Project with Docker - Part 2
Set docker build args from .env file (NextJS)