<p></p><img src="https://image.until.blog/laravel/article/1716540066755" alt="until-205"><p>LAMP 스택으로 Ubuntu에서 Laravel 프로젝트 생성까지 진행하는 script.</p><p>PHP 8.3, Apache2, Composer, npm, MariaDB 차례대로 설정 후</p><p>Laravel을 Livewire, Jetstream과 함께 설치하는 것까지 한 방에 진행함.</p><p>필요시 수정해서 사용하시길</p><p></p><pre spellcheck="false"><code class="language-bash">#!/bin/bash

# Snap 설치 여부 확인
read -p "VS Code를 설치하시겠습니까? (Y/N) " answer
if [[ "$answer" == "Y" || "$answer" == "y" ]]; then
    echo -e "\e[48;2;255;255;0;38;2;0;0;0mVS Code 설치중..(약 1분 소요됨)\e[0m"
    sudo snap install --classic code
else
    echo -e "\e[48;2;255;255;0;38;2;0;0;0mVS Code 설치를 취소하였습니다.\e[0m"
fi

# 시스템 업데이트 및 업그레이드
echo -e "\e[48;2;255;255;0;38;2;0;0;0m시스템 업데이트, 업그레이드중..\e[0m"
sudo apt update
sudo apt upgrade -y

# PHP 설치
echo -e "\e[48;2;255;255;0;38;2;0;0;0mPHP 8.3 설치중..\e[0m"
sudo apt install -y php8.3 php8.3-common php8.3-cli php8.3-gd php8.3-mysqlnd php8.3-redis php8.3-curl php8.3-intl php8.3-mbstring php8.3-bcmath php8.3-xml php8.3-zip

# Apache2 설치 및 실행
echo -e "\e[48;2;255;255;0;38;2;0;0;0mApache2 설치중..\e[0m"
sudo apt install -y apache2
sudo systemctl enable apache2
sudo systemctl start apache2

# UFW(방화벽) 설정
echo -e "\e[48;2;255;255;0;38;2;0;0;0mUFW 설정중..\e[0m"
sudo ufw allow 'Apache'
sudo ufw enable

# Curl 및 Composer 설치
echo -e "\e[48;2;255;255;0;38;2;0;0;0mCurl, Composer 설치중..\e[0m"
sudo apt install -y curl
sudo apt install -y composer

# npm 설치
echo -e "\e[48;2;255;255;0;38;2;0;0;0mnpm 설치 시작\e[0m"
sudo apt install -y npm

# MariaDB 설치
echo -e "\e[48;2;255;255;0;38;2;0;0;0mMariaDB 설치중..\e[0m"
sudo apt-get install -y mariadb-server
sudo systemctl enable mariadb
sudo systemctl start mariadb.service

# MariaDB 쉘 실행 및 보안 설정 자동화
echo -e "\e[48;2;255;255;0;38;2;0;0;0mMariaDB 보안 설정중..\e[0m"
sudo mariadb &lt;&lt; EOF
SET PASSWORD FOR 'root'@'localhost' = PASSWORD('root');
DELETE FROM mysql.user WHERE User='';
DELETE FROM mysql.user WHERE User='root' AND Host NOT IN ('localhost', '127.0.0.1', '::1');
DROP DATABASE IF EXISTS test;
DELETE FROM mysql.db WHERE Db='test' OR Db='test\\_%';
FLUSH PRIVILEGES;
EOF

# Laravel 프로젝트 생성
echo -e "\e[48;2;255;255;0;38;2;0;0;0m이제 프로젝트 생성 단계입니다.\e[0m"
read -p "새로운 Laravel 프로젝트의 이름을 입력하세요: " project_name
composer create-project laravel/laravel "$project_name"
cd "$project_name"

# .env 파일 내용 변경
echo -e "\e[48;2;255;255;0;38;2;0;0;0m.env 파일 내용 변경\e[0m"
sed -i 's/DB_CONNECTION=.*$/DB_CONNECTION=mariadb/' .env
sed -i 's/# DB_HOST=.*$/DB_HOST=127.0.0.1/' .env
sed -i 's/# DB_PORT=.*$/DB_PORT=3306/' .env
sed -i 's/# DB_DATABASE=.*$/DB_DATABASE=lounge/' .env
sed -i 's/# DB_USERNAME=.*$/DB_USERNAME=root/' .env
sed -i 's/# DB_PASSWORD=.*$/DB_PASSWORD=root/' .env

echo -e "\e[48;2;255;255;0;38;2;0;0;0mMigration 시도중\e[0m"
php artisan migrate --force

echo -e "\e[48;2;255;255;0;38;2;0;0;0mLivewire 설치 시작\e[0m"
composer require livewire/livewire

echo -e "\e[48;2;255;255;0;38;2;0;0;0mJetStream 설치 시작\e[0m"
composer require laravel/jetstream
php artisan jetstream:install livewire

echo -e "\e[48;2;255;255;0;38;2;0;0;0mLaravel Installer 설치 시작\e[0m"
composer global require "laravel/installer"
echo -e "\e[48;2;255;255;0;38;2;0;0;0m환경변수 추가\e[0m"
# export PATH="~/.config/composer/vendor/bin:$PATH"
echo 'export PATH="~/.config/composer/vendor/bin:$PATH"' &gt;&gt; ~/.bashrc
source ~/.bashrc
echo -e "\e[48;2;0;0;255;38;2;255;255;255m"
laravel --version
echo -e "설치 완료\e[0m"

# jetstream 기능 정의(주석 제거)
config_file="config/jetstream.php"
sed -i 's/\/\/ Features::profilePhotos/Features::profilePhotos/' $config_file
sed -i 's/Features::accountDeletion/\/\/Features::accountDeletion/' $config_file

echo -e "\e[48;2;255;255;0;38;2;0;0;0mLaravel 프로젝트 생성 및 설정 완료!\e[0m"

echo -e "\e[48;2;255;255;0;38;2;0;0;0mLaravel npm run build !\e[0m"
# npm install &amp;&amp; npm run build
npm install &amp;&amp; npm run dev
</code></pre><p></p><p></p><p></p><p></p>

LAMP 스택으로 Ubuntu에서 Laravel 프로젝트 생성까지 진행하는 script.PHP 8.3, Apache2, Composer, npm, MariaDB 차례대로 설정 후Laravel을 Livewire, Jetstream과 함께 설치하는 것까지 한 방에 진행함.필요시 수정해서 사용하시길#!/bin/bash

# Snap 설치 여부 확인
read -p

Ubuntu에서 Laravel install Script

Firebase

<p>지인들과 같이 사용할 목적으로 만든 블로그가 완성된 기념으로 블로그를 제작하며 겪었던 React와 TypeScript를 이용한 프로젝트를 Firebase에 배포하는 과정을 공유하고자 합니다. 특히 서버 사이드 렌더링(SSR) 적용과 Firebase 배포 경험을 중점적으로 다루겠습니다.</p><blockquote><p>이 글은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://aurchive.com/posts/tj87pFGqiWDiLl18LVXl">이 곳</a> 에서도 읽어 보실 수 있습니다.</p></blockquote><p>Google에서 제공하는 Firebase는 편리한 사용성과 높은 생산성을 갖춘 모바일 및 웹 애플리케이션 개발 플랫폼입니다. 클라이언트 개발에 집중하고 싶었던 저에게 매력적인 선택지였습니다. 그러나 향후 다른 플랫폼으로의 이전 가능성을 고려하여 Firebase Client SDK 대신 Cloud Functions를 활용하여 API 서버를 구축하는 방식을 택했습니다.</p><h2>시작하기</h2><h3>Firebase 프로젝트 생성</h3><p>Google 계정으로 로그인 후 Firebase 콘솔(<a target="_blank" rel="noopener noreferrer nofollow" href="http://firebase.google.com/"><u>firebase.google.com</u></a>)에 접속하여 다음과 같이 프로젝트를 설정합니다.</p><p>1. 프로젝트 생성: '프로젝트 만들기' 버튼을 클릭하여 새 프로젝트를 생성합니다.<br>2. Hosting 활성화: 생성된 프로젝트의 사이드바에서 '빌드' &gt; 'Hosting'을 선택하여 Hosting 기능을 활성화합니다.<br>3. Blaze 요금제 선택: Cloud Functions 배포를 위해 Blaze 요금제를 선택하고 결제 수단을 등록합니다.</p><h3>Vite를 이용한 React 프로젝트 생성</h3><p>Firebase 프로젝트 설정을 완료했으므로, 이제 Vite를 사용하여 TypeScript 기반의 React 프로젝트를 생성해 보겠습니다. 터미널에서 다음 명령어를 실행합니다.</p><pre spellcheck="false"><code>$ yarn create vite your-project --template react-ts</code></pre><p>위 명령어 실행 후 안내에 따라 프로젝트 디렉토리로 이동하고, 기본 패키지를 설치한 후 개발 서버를 실행합니다.</p><pre spellcheck="false"><code>$ cd your-project
$ yarn
$ yarn dev</code></pre><p>이제 브라우저에서 <code spellcheck="false">http://localhost:5173/</code>로 접속하면 Vite에서 기본 제공하는 간단한 React 애플리케이션을 확인할 수 있습니다.</p><h3>Firebase 프로젝트와 연동하기</h3><p>이제 Firebase CLI를 사용하여 Firebase 프로젝트와 연동하는 과정을 안내해 드리겠습니다.</p><h4>1. Firebase CLI 설치</h4><p>터미널에서 다음 명령어를 실행하여 Firebase CLI를 전역적으로 설치합니다.</p><pre spellcheck="false"><code>$ npm install -g firebase-tools</code></pre><h4>2. Firebase에 로그인</h4><p>설치된 Firebase CLI를 사용하여 Firebase 계정에 로그인합니다.</p><pre spellcheck="false"><code>$ firebase login</code></pre><p>로그인 명령을 실행하면 브라우저 창이 열리고, Google 계정으로 로그인하라는 메시지가 표시됩니다. 화면의 지시에 따라 로그인을 진행하고, Firebase CLI에 대한 액세스를 허용해주세요.</p><h4>3. 프로젝트 목록 확인</h4><p>로그인이 완료되면 다음 명령어를 실행하여 현재 연결된 Firebase 프로젝트 목록을 확인할 수 있습니디.</p><pre spellcheck="false"><code>$ firebase projects:list</code></pre><p>만약 프로젝트 목록이 정상적으로 출력된다면 Firebase CLI가 올바르게 설치되었고, 계정과 연결되었다는 의미입니다.</p><p>(선택사항) 연결된 Firebase 프로젝트를 변경하고 싶다면 <code spellcheck="false">firebase use &lt;프로젝트 ID&gt;</code> 명령어를 이용해 변경할 수 있습니다.</p><h4>4. 프로젝트 초기화</h4><p>다음 명령어를 실행하여 프로젝트를 초기화합니다. 초기화 과정에서 사용할 Firebase 기능을 선택하고, 필요한 설정을 진행합니다.</p><pre spellcheck="false"><code>$ firebase init</code></pre><img src="https://image.until.blog/susmisc14/article/1722669914257" alt="until-1177"><h3>Cloud Functions 를 사용해 SSR 구현하기</h3><p>Firebase 설정이 완료되었으므로, 이제 Cloud Functions를 활용하여 서버 사이드 렌더링(SSR)을 구현해 보겠습니다. 이를 통해 SEO(검색 엔진 최적화)를 개선할 수 있습니다.</p><h4>1. 필수 라이브러리 설치</h4><p>루트 경로에 생성된 <code spellcheck="false">functions</code> 디렉토리를 삭제하고 다음 명령어를 통해 SSR에 필요한 라이브러리를 설치합니다.</p><pre spellcheck="false"><code>$ yarn add firebase-functions express cors compression isbot</code></pre><p>- <code spellcheck="false">firebase-functions</code>: Firebase Cloud Functions를 사용하기 위한 라이브러리입니다.<br>- <code spellcheck="false">express</code>: Node.js 웹 애플리케이션 프레임워크입니다.<br>- <code spellcheck="false">cors</code>: 다른 도메인에서 자원을 요청할 수 있도록 CORS(Cross-Origin Resource Sharing)를 설정합니다.<br>- <code spellcheck="false">compression</code>: HTTP 응답 데이터를 압축하여 전송 시간을 단축시켜줍니다.<br>- <code spellcheck="false">isbot</code>: 사용자 에이전트를 분석하여 봇 여부를 판단하는 데 사용됩니다.</p><h4>2. Cloud Functions 함수 작성</h4><p>프로젝트 루트 경로에 <code spellcheck="false">index.server.ts</code> 파일을 생성하고 다음과 같이 코드를 작성합니다.</p><pre spellcheck="false"><code>import compression from "compression";
import cors from "cors";
import express from "express";
import functions from "firebase-functions";
import { renderer } from "./src/entry-server";

const app = express();

const corsOptions = {
  origin: true,
  credentials: true,
};

app.use(cors(corsOptions));
app.use(compression());

app.get("*", renderer);

export const render = functions.https.onRequest(app);</code></pre><p><code spellcheck="false">src</code> 디렉토리에 <code spellcheck="false">entry-client.tsx</code> 파일을 생성하고 다음과 같이 코드를 작성합니다.</p><p><code spellcheck="false">entry-client.tsx</code> 파일은 클라이언트에서 React 애플리케이션을 렌더링하는 엔트리 포인트입니다. 기존의 <code spellcheck="false">root</code> 요소가 비어 있으면 <code spellcheck="false">createRoot</code>를 사용해 렌더링하고, 그렇지 않으면 <code spellcheck="false">hydrateRoot</code>를 사용해 기존 콘텐츠를 재사용합니다.</p><pre spellcheck="false"><code>// src/entry-client.tsx

import { StrictMode } from 'react';
import { createRoot, hydrateRoot } from 'react-dom/client';
import App from '~app';

const root = document.getElementById('root')!;
const children = &lt;App /&gt;;

if (root.childElementCount === 0) {
  createRoot(root).render(&lt;StrictMode&gt;{children}&lt;/StrictMode&gt;);
} else {
  hydrateRoot(root, children);
}</code></pre><p>다음으로 <code spellcheck="false">src/entry-server.tsx</code> 파일을 생성하고 서버 사이드 렌더링을 위한 코드를 작성합니다.</p><p>이 코드는 Express 요청을 처리하여 React 애플리케이션을 서버에서 렌더링하고, 생성된 HTML을 클라이언트로 스트리밍합니다. <code spellcheck="false">isbot</code> 라이브러리를 사용하여 사용자 에이전트가 봇인지 확인하고, 봇일 경우 완성된 HTML을 한 번에 전송합니다.</p><pre spellcheck="false"><code>// src/entry-server.tsx

import { Transform } from "stream";
import { Request, Response } from "express";
import { renderToPipeableStream } from "react-dom/server";
import App from "./App";
import { isbot } from "isbot";

export async function renderer(req: Request, res: Response) {
  let isError = false;

  const stream = renderToPipeableStream(&lt;App /&gt;, {
    bootstrapModules: ["/index.js"],

    onShellReady() {
      if (!isbot(req.get("user-agent"))) { // 브라우저일 경우 스트리밍 방식으로 HTML 전송
        res.statusCode = isError ? 500 : 200;

        res.setHeader("content-type", "text/html");
        stream.pipe(transformContent()).pipe(res);
      }
    },

    onShellError() {
      res.statusCode = 500;

      res.setHeader("content-type", "text/html");
      res.send("&lt;h1&gt;Something went wrong&lt;/h1&gt;");
    },

    onAllReady() {
      if (isbot(req.get("user-agent"))) { // 봇일 경우 완성된 HTML을 한 번에 전송
        res.statusCode = isError ? 500 : 200;

        res.setHeader("content-type", "text/html");
        stream.pipe(transformContent()).pipe(res);
      }
    },

    onError(error) {
      isError = true;

      console.error(error);
    },
  });
}

function transformContent() {
  let content = "";

  const transform = new Transform({
    transform(chunk, _, callback) {
      content += chunk;

      callback();
    },

    flush(callback) {
      const data = `&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8" /&gt;&lt;link rel="icon" type="image/svg+xml" href="/vite.svg" /&gt;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;&lt;title&gt;Vite + React + TS&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="root"&gt;${content}&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;`;

      callback(null, data);
    },
  });

  return transform;
}</code></pre><p>이 과정을 통해 서버 사이드 렌더링(SSR)을 구현할 수 있습니다. 이제 서버에서 렌더링된 HTML을 클라이언트에 전송하고, 클라이언트는 이를 재사용하여 빠르게 초기 로딩을 완료할 수 있습니다.</p><h4>3. index.html 수정</h4><p><code spellcheck="false">src/main.tsx</code> 파일을 삭제하고 <code spellcheck="false">index.html</code> 파일을 수정하여 클라이언트 사이드 엔트리 포인트를 변경합니다.</p><pre spellcheck="false"><code>// index.html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;link rel="icon" type="image/svg+xml" href="/vite.svg" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Vite + React + TS&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
    &lt;script type="module" src="/src/entry-client.tsx"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre><h4>4. 빌드 설정</h4><p>Firebase에 배포를 위한 설정을 진행하겠습니다. 루트 경로의 <code spellcheck="false">vite.config.ts</code> <code spellcheck="false">package.json</code> <code spellcheck="false">firebase.json</code> 파일을 다음과 같이 수정합니다.</p><pre spellcheck="false"><code>// vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: "[name].js",
      },
    },
  },
});</code></pre><pre spellcheck="false"><code>// firebase.json

{
  "functions": [
    {
      "runtime": "nodejs20",
      "source": "./dist/server",
      "codebase": "default"
    }
  ],
  "hosting": {
    "public": "dist/client",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "render"
      }
    ]
  }
}</code></pre><pre spellcheck="false"><code>// package.json

{
// ...생략
  "main": "dist/server/index.server.js",
  "scripts": {
    "dev": "vite",
    "build:client": "tsc &amp;&amp; vite build --outDir dist/client",
    "build:server": "tsc &amp;&amp; vite build --outDir dist/server --ssr index.server.ts &amp;&amp; cp ./package.json ./dist/server",
    "fb:serve": "yarn build:client &amp;&amp; yarn build:server &amp;&amp; rm -rf dist/client/index.html &amp;&amp; firebase serve",
    "fb:deploy": "yarn build:client &amp;&amp; yarn build:server &amp;&amp; rm -rf dist/client/index.html &amp;&amp; firebase deploy"
  }
}</code></pre><p>※ <code spellcheck="false">package.json</code> 파일 중 <code spellcheck="false">scripts</code> 구문에 빌드 후 <code spellcheck="false">index.html</code> 파일을 삭제하는 부분이 있습니다. <code spellcheck="false">index.html</code> 파일을 삭제하는 이유는 Firebase 호스팅의 경우 루트 경로에 HTML 파일이 있으면 <code spellcheck="false">firebase.json</code> 파일에서 설정한 <code spellcheck="false">rewrites</code> 구문이 무시되고 무조건 HTML 파일을 읽게 됩니다. 우리는 SSR이 적용된 프로젝트를 Firebase에 배포하는 것이 목적이므로, 호스팅 루트 경로에 있는 HTML 파일은 삭제해주어야 합니다.</p><h4>5. 배포</h4><p>이제 모든 과정이 끝났습니다. 콘솔에 <code spellcheck="false">yarn fb:serve</code>를 입력하고 개발 서버를 실행하면 SSR이 적용된 페이지를 볼 수 있습니다.</p><img src="https://image.until.blog/susmisc14/article/1722668245260" alt="until-1174"><p>로컬 환경에서 SSR이 적용된 것을 확인했으면 터미널에서 <code spellcheck="false">yarn fb:deploy</code>를 입력합니다. 배포된 사이트에 접속하면 SSR이 적용된 페이지를 확인 할 수 있습니다.</p><p>배포된 결과물은 <a target="_blank" rel="noopener noreferrer nofollow" href="http://react-ts-with-ssr.web.app">react-ts-with-ssr.web.app</a> 에서 확인 할 수 있습니다.</p><img src="https://image.until.blog/susmisc14/article/1722668252177" alt="until-1175"><h2>마무리</h2><p>앞으로 Emotion JS를 사용해 SSR 환경에서 스타일을 주입하거나, react-helmet-async 라이브러리를 사용해 SEO 성능을 높이는 등의 활용이 가능합니다. 다음 글에서는 react-router-dom 라이브러리와 react-helmet-async 라이브러리를 활용해서 SEO 최적화하는 방법을 알아보겠습니다.</p><p>[ 다음글 ] <a target="_blank" rel="noopener noreferrer nofollow" href="https://aurchive.com/posts/DdaMfA8nVvFun3RFsSX4"><u>React + Typescript 프로젝트에 SSR을 적용해 파이어베이스에 배포하기(2)</u></a></p>

지인들과 같이 사용할 목적으로 만든 블로그가 완성된 기념으로 블로그를 제작하며 겪었던 React와 TypeScript를 이용한 프로젝트를 Firebase에 배포하는 과정을 공유하고자 합니다. 특히 서버 사이드 렌더링(SSR) 적용과 Firebase 배포 경험을 중점적으로 다루겠습니다.이 글은 이 곳 에서도 읽어 보실 수 있습니다.Google에서 제공하는 F

React + Typescript 프로젝트에 SSR을 적용해 파이어베이스에 배포하기(1)

🧑‍💻 Develop

<blockquote><p>배포한 결과물은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://keeeep.web.app/">https://keeeep.web.app</a> 에 접속하면 확인해볼 수 있어요.</p></blockquote><p>react를 무료로 배포할 수 있는 다양한 호스팅 서비스들이 존재합니다. (github, netlify 등등)</p><p>언급한 두 서비스 외에 firebase로도 배포할 수 있다는 사실 알고 계셨나요? 심지어 firebase로 배포하면 *.web.app 이라는 유니크한 도메인도 무료로 사용할 수 있어서 간단하게 소개해보겠습니다.</p><p>위에 소개한 앱은 database또한 firebase로 만들어진 todo 앱인데요, database를 연동하는것은 추후에 소개해볼게요.</p><h1>배포하기</h1><h2>프로젝트 생성</h2><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://console.firebase.google.com/">https://console.firebase.google.com/</a> 에 접속해 프로젝트를 생성해주세요. </p><p>애널리틱스 연동은 필요에 따라 선택해주시면 돼요.</p><p>생성해주셨다면 <strong>빌드 &gt; 호스팅</strong> 메뉴를 선택해 시작하기를 눌러주세요.</p><img src="https://image.until.blog/morethanmin/article/1722157087360" alt="until-959"><h2>firebaes cli 설치</h2><p>가이드에 따라 firebase-cli를 설치해주세요.</p><pre spellcheck="false"><code class="language-bash">npm install -g firebase-tools</code></pre><p><code spellcheck="false">웹 앱에 Firebase 자바스크립트 SDK를 추가하는 단계도 표시합니다.</code> 는 호스팅만 하는 경우에는 필요하지 않으니 꼭 체크하지 않으셔도 괜찮아요.</p><h2>firebase init</h2><p>배포하고자 하는 app의 root directory에서 아래 커맨드를 순차적으로 입력해주세요.</p><pre spellcheck="false"><code class="language-bash">firebase login

firebase init</code></pre><p>init 입력시 아래와 같이 나오는데, Hosting이 목적이므로 <code spellcheck="false">Hosting</code> 선택. </p><img src="https://image.until.blog/morethanmin/article/1722157605095" alt="until-960"><p>프로젝트를 만들었으므로 <code spellcheck="false">Use an existing project</code> 선택.</p><img src="https://image.until.blog/morethanmin/article/1722157665078" alt="until-962"><p><code spellcheck="false">npm run build</code> 입력시 생성되는 react app의 빌드 디렉터리를 입력 해주시면 됩니다. 기본적으로 <code spellcheck="false">build</code> 폴더에 빌드되기 때문에 <code spellcheck="false">build</code> 를 입력해주었어요.</p><img src="https://image.until.blog/morethanmin/article/1722157807152" alt="until-963"><p>리액트는 기본적으로 single-page-application이기에 <code spellcheck="false">y</code> 입력.</p><img src="https://image.until.blog/morethanmin/article/1722157882041" alt="until-964"><p>Github과 연동하지는 않을 것이므로 <code spellcheck="false">N</code> 입력.</p><img src="https://image.until.blog/morethanmin/article/1722157930986" alt="until-965"><p>기존 index.html을 덮어씌울것이냐고 물어보는데, <code spellcheck="false">N</code>입력.</p><img src="https://image.until.blog/morethanmin/article/1722158011014" alt="until-966"><p>그러면 아래와 같이 설정파일들이 생성돼요.</p><img src="https://image.until.blog/morethanmin/article/1722158178162" alt="until-967"><h2>빌드 스크립트 추가하기</h2><p>이제 <code spellcheck="false">firebase deploy</code> 만 입력하면 바로 배포가 되는데요, 조금더 편리하게 배포할 수 있도록 <code spellcheck="false">package.json</code>에 스크립트를 추가해보겠습니다.</p><p>우선, <code spellcheck="false">npm install -D firebase-tools</code> 을 입력해 cli를 프로젝트에 설치해줍시다.</p><p>이후 아래와 같이 deploy 스크립트를 추가해주었어요.</p><img src="https://image.until.blog/morethanmin/article/1722158413570" alt="until-968"><p>이제 <code spellcheck="false">npm run deploy</code>만 입력해주면 빌드 후 배포됩니다. 콘솔에 나와있는 url에 접속하면 배포된 것을 확인할 수 있어요. </p><h1>*.web.app 도메인 주소 변경하기</h1><p>만약 본인이 *.web.app 기반의 다른 도메인 주소로 변경하고 싶다면 <code spellcheck="false">호스팅 &gt; 사이트 추가</code> 에서 원하는 도메인을 입력해주시면 무료로 도메인도 변경할 수 있어요.</p><img src="https://image.until.blog/morethanmin/article/1722158725214" alt="until-969">

배포한 결과물은 https://keeeep.web.app 에 접속하면 확인해볼 수 있어요.react를 무료로 배포할 수 있는 다양한 호스팅 서비스들이 존재합니다. (github, netlify 등등)언급한 두 서비스 외에 firebase로도 배포할 수 있다는 사실 알고 계셨나요? 심지어 firebase로 배포하면 *.web.app 이라는 유니크한 도메인도 

firebase로 react 배포하고 *.web.app 도메인 무료로 사용하기

배포하기

프로젝트 생성

firebaes cli 설치

firebase init

빌드 스크립트 추가하기

*.web.app 도메인 주소 변경하기