دو برنامه React در یک سطل S3.

این روزها قبل، مجبور شدم به دنبال اطلاعاتی بگردم و بررسی کنم که آیا دو برنامه React می توانند در یک سطل S3 بدون استفاده از هیچ سرویس AWS دیگری به جز سطل S3 با هم وجود داشته باشند یا خیر.

من می گویم که این عمل خوبی نیست و فقط در موارد خاصی مانند آنچه به من ارائه شده است راه حل خواهد بود.

ایده این است که بتوانیم بین دو برنامه زمانی که هر دو در سطل مستقر شدند پرش کنیم. برای انجام این کار، اولین قدم ایجاد یک ساختار پوشه است که درک را تا حد امکان تسهیل کند.

./react-apps
    /original-app #### Original react app
    /nested-app #### Nested react app

برای هر دو پروژه ( برنامه اصلی و برنامه تو در تو) از Vite + React استفاده خواهیم کرد. بنابراین در داخل “/react-apps” پوشه:

npm create vite@latest original-app -- --template react
npm create vite@latest nested-app -- --template react

در داخل هر پروژه ما فایل را پیدا خواهیم کرد “vite.config.js” که باید در هر دو مورد آن را تنظیم کنیم. ابتدا به سراغ فایل پیکربندی می‌رویم “اپلیکیشن اصلی” پروژه:

import react from '@vitejs/plugin-react-swc'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '/',
  build: {
    outDir: '../dist',
    emptyOutDir: true,
  },
})

اساساً ما مکان ساخت پروژه را نشان می دهیم و هنگام انجام آن در خارج از دایرکتوری root هیچ هشداری نشان نمی دهیم. ما هر دو پروژه را در فهرست اصلی خود خواهیم ساخت “/react-apps”.

که در “برنامه تودرتو” فایل پیکربندی ما باید به شکل زیر باشد:

import react from '@vitejs/plugin-react-swc'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '/nested-app/',
  build: {
    outDir: '../dist/nested-app',
    emptyOutDir: true,
  },
})

در اینجا دو تفاوت وجود دارد:

• اولین مورد این است که ما به آن اشاره می کنیم “/nested-app/” مسیر عمومی خواهد بود که در آن برنامه هم در توسعه و هم در تولید به ما خدمت خواهد کرد.
• دوم این است که ما به آن می گوییم که پروژه را در زیر شاخه ای بسازد “اپلیکیشن اصلی” ساختن.

هنگامی که فایل های پیکربندی را همانطور که دیدیم داریم، گام بعدی نصب React Router در هر دو پروژه است.

npm install react-router-dom localforage match-sorter sort-by

ما باید از مولفه “HashRouter” استفاده کنیم تا این دو برنامه بتوانند با هم وجود داشته باشند و زمانی که آنها در سطل ما هستند یا در حال سرویس دهی به برنامه های ایستا هستیم، بتوانیم از یکی به دیگری برویم. “npm خدمت” . برای درک نحوه عملکرد این مؤلفه می توانید اسناد رسمی را بخوانید.

برای درک رفتار در سطح پایه، بیایید نگاهی به آن بیندازیم “App.jsx” اجزای هر دو “اپلیکیشن اصلی” و “برنامه تودرتو” برنامه های کاربردی.

در هر دو برنامه ما دو مسیر را پیکربندی کرده ایم:

• صفحه نخست => “https://dev.to/”
• صفحه درباره => “https://dev.to/about”

این جزء ما خواهد بود “اپلیکیشن اصلی” پروژه:

// Path: react-apps/original-app/App.jsx

import { HashRouter, Route, Routes } from 'react-router-dom'

const App = () => {
    return (
        <HashRouter basename={'/'}>
        <Routes>
          <Route
            path="https://dev.to/"
            element={
              <div>
                <a href="/nested-app/#/about">About Nested App</a>
                <a href="/#/about">About Original App</a>
              </div>
            }
          />
          <Route 
            path="/about/" 
            element={
                <div>
                    <a href="/nested-app/#/">Home Nested App</a>
                    <a href="/#/">Home Original App</a>
                </div>
            } 
          />
        </Routes>
      </HashRouter>
    )
}

export default App

و این جزء ما خواهد بود “برنامه تودرتو” پروژه:

// Path: react-apps/nested-app/App.jsx

import { HashRouter, Route, Routes } from 'react-router-dom'

const App = () => {
    return (
        <HashRouter basename={'/'}>
        <Routes>
          <Route 
            path="https://dev.to/" 
            element={
            <div>
                <a href="/nested-app/#/about">About Nested App</a>
                <a href="/#/about">About Original App</a>
            </div>
            } 
          />
          <Route
            path="/about/"
            element={
              <div>
                <a href="/#/">Home Original App</a>
                <a href="/nested-app/#/">Home Nested App</a>
              </div>
            }
          />
        </Routes>
      </HashRouter>
    )
}

export default App

در حال حاضر می توانیم بین دو مسیر هر دو برنامه حرکت کنیم. پرش از یک برنامه به برنامه دیگر با تنها ویژگی که “هش روتر” جزء با اضافه کردن کار می کند “هش” به مسیرها می توانید اطلاعات را بین دو برنامه از طریق URL یا از طریق به اشتراک بگذارید “SessionStorage” یا “Storage محلی”.

وقتی همه این ساختار را داشتیم، می‌توانیم build of را اجرا کنیم “اپلیکیشن اصلی” و سپس ساخت “برنامه تودرتو”.

# Path: react-apps/original-app
npm run build

# Path: react-apps/nested-app
npm run build

این “/dist” پوشه در دایرکتوری ریشه ما ایجاد می شود و ما باید چیزی شبیه به این را ببینیم:

./react-apps
   /original-app #### Original react app
   /nested-app #### Nested react app
   /dist #### Folder with both builds

درون “/dist” پوشه:

.dist/
   index.html #### Index of original-app
   /assets #### Assets of original-app
   /nested-app #### Folder with nested-app
     index.html #### Index of nested-app
     /assets #### Assets of nested-app

اکنون می توانیم محتویات را آپلود کنیم “/dist” پوشه و دو برنامه با هم در یک سطل S3 وجود داشته باشند. ما همچنین می‌توانیم استاتیک خود را با اجرای آن سرویس کنیم “خدمت” فرمان از “/original-app” پوشه ای که برنامه اصلی ما خواهد بود.

# Path: ./react-apps/original-app
npm run serve

در نهایت، فقط به یاد داشته باشید که این یک روش خوب نیست و خود مستندات React Router در حال حاضر توصیه می کند از استفاده از “هش روتر” جزء. اما برای موارد خاص، می تواند یک راه حل موقت برای یک مشکل باشد زیرا با این کار استفاده از آن ضروری نخواهد بود AWS “CloudFront”، فقط سطل S3.

با تشکر از همکارم ویکتور 🙌 و جامعه دنیل پریمو 💜 که در این آزمایش به من کمک کردند.

درود 👋