Bir React uygulaması nasıl barındırılır?

Bu makalede, kullanıcı arayüzleri oluşturmak için en popüler ön uç kütüphanelerinden biri olan React hakkında konuşacağız. Önce avantajlarını ve dezavantajlarını inceleyeceğiz, ardından bir React web uygulamasının nasıl oluşturulacağına ve son olarak da Back4app Containers üzerinde nasıl barındırılacağına göz atacağız.

React nedir?

React, etkileşimli kullanıcı arayüzleri oluşturmak için ücretsiz ve açık kaynaklı bir JavaScript kütüphanesidir. Meta (eski adıyla Facebook) tarafından 2013 yılında oluşturulmuştur. Bu yazının yazıldığı sırada en popüler UI kütüphanelerinden biridir. Tek sayfalı uygulamalar (SPA’lar), sunucu tarafından oluşturulan uygulamalar ve yerel uygulamalar (masaüstü ve mobil) oluşturmak için çok yönlü bir araçtır.

React, bir sayfanın birden fazla yeniden kullanılabilir parçaya veya “bileşen” olarak adlandırılan parçalara ayrılabildiği bileşen tabanlı bir mimari kullanır. Bu mimari kod kalitesini, okunabilirliği ve sürdürülebilirliği artırır ve bağımsız kişilerin veya ekiplerin birlikte çalışmasına olanak tanır.

Diğer önemli React özellikleri şunlardır:

• Bildirimsel yapı — geliştiriciler bir kullanıcı arayüzünün istenen durumunu tanımlar, React ise bu duruma göre kullanıcı arayüzünün verimli bir şekilde güncellenmesini ve oluşturulmasını sağlar.
• Tek yönlü veri akışı — veriler yalnızca ebeveynden çocuğa aktarılabilir.
• Sanal DOM — React, tarayıcının görüntülenen DOM’unu verimli bir şekilde güncellemek için sanal bir DOM kullanır.
• Kancalar — bileşenlerin parçalarını izole etmek için kullanılabilen basit JavaScript işlevleri.
• JSX — JavaScript için HTML’ye benzer genişletilmiş sözdizimi. Verileri biçimlendirmek, koşullu ifadeler, döngü ve daha fazlası için yararlı olan doğrudan JS yürütmesine izin verir.

Geçtiğimiz birkaç ay içinde React de tam yığın uygulamalar oluşturmak için popüler bir araç haline geldi. Bu, React uygulamaları oluşturmak için en popüler çerçevelerden ikisi olan Next.js ve Remix sayesinde oldu. Kullanıma hazır yönlendirme, görüntü optimizasyonu, yazı tipi optimizasyonu, veri getirmeyi basitleştirme ve daha fazlasını sağlayarak geliştirme sürecini büyük ölçüde basitleştiriyorlar.

2023’teki en popüler React alternatifleri Vue, Svelte, Solid ve Angular‘dır.

React alternatifleri hakkında daha fazla bilgi edinmek için En İyi 10 React Alternatifi‘ne göz atın.

React’in Faydaları

Performans

React, güncelleme ve işleme sürecini optimize etmek için sanal bir DOM kullanır. React, DOM’u doğrudan manipüle etmek yerine, kullanıcı arayüzünün bellek içi bir temsilini oluşturur. Daha sonra DOM’un yalnızca gerekli kısımlarını verimli bir şekilde günceller, bu da daha hızlı işleme ve gelişmiş performans ile sonuçlanır.

Bileşen Tabanlı Mimari

React bileşen tabanlı bir mimari kullanır. Bu, kodun yeniden kullanılabilirliğini ve kodun sürdürülebilirliğini artırır. Bunun da ötesinde, 3. parti bileşenleri projenize entegre etmeyi kolaylaştırır (örn. video oynatıcı, galeri, atlıkarınca).

Geliştirme sürecini hızlandırmak için ChakraUI, MUI, AntDesign veya React Bootstrap gibi çeşitli hazır React bileşen kütüphaneleri arasından da seçim yapabilirsiniz. Alternatif olarak TailwindCSS‘i de kullanabilirsiniz.

Öğrenmesi Kolay

JavaScript’e ve kullanıcı arayüzü oluşturmaya aşina iseniz React’i öğrenmek oldukça kolay olacaktır. React ekibi yakın zamanda eski dokümantasyondan çok daha iyi olan yeni bir dokümantasyon yayınladı. Belgeleri okuyarak, daha sonra gerçek dünya projeleri oluştururken uygulayabileceğiniz temel React kavramlarını kavrayacaksınız.

Görsel olarak öğrenmeyi seviyorsanız YouTube ve Udemy’de birçok ücretsiz ve ücretli React video kursu da mevcuttur.

Çapraz platform

React’i öğrenerek web uygulamalarını, masaüstü uygulamalarını ve yerel mobil uygulamaları kodlayabileceksiniz.

Belirli bir platform için uygulama oluşturmak için birçok kütüphane mevcuttur. Eğer bir mobil uygulama geliştiriyorsanız Expo ya da React Native‘i kullanmanızı tavsiye ederim. Windows uygulamaları için react-native-windows ve macOS için react-native-macos var.

Topluluk

React geniş bir ekosisteme sahiptir ve büyük bir geliştirici topluluğu tarafından desteklenmektedir. NPM’de tekerleği yeniden icat etmek yerine kullanabileceğiniz bir sürü paket var. GitHub‘da harika React paketlerinin bir listesini bulabilirsiniz.

React’in Sınırlamaları

Yüksek Gelişim Hızı

On yıldan daha eski olmasına rağmen React kapsamlı bir gelişim sürecinden geçmeye devam ediyor. React ekibi sık sık React uygulamalarının nasıl oluşturulduğunu temelden değiştiren özellikler yayınlıyor. 2019’da hook’ları yayınladılar ve ardından tüm React uygulamaları sınıf tabanlı bileşenlerden işlev tabanlı bileşenlere geçti. Şimdi benzer bir şey sunucu tarafı görüntülemede yaşanıyor.

Ancak endişelenmeyin, React ekibi her şeyi geriye dönük uyumlu tutmak için elinden geleni yapıyor.

3. Taraf Kütüphanelere Güvenme

React bir framework değil, bir kütüphanedir. Bu, karmaşık React uygulamaları oluştururken birkaç 3. parti paket yüklemeniz gerektiği anlamına gelir. Örneğin, React yerleşik bir yönlendirme sistemine, görüntü optimizasyonuna ve form işlemeye sahip değildir.

Konvansiyon eksikliği

React ve genel olarak JavaScript standardizasyon ve kurallardan yoksundur. Bir şeyi başarmanın birden fazla yolu vardır ve bu da çoğu zaman React kaynak kodlarının şirketten şirkete oldukça farklı olmasına neden olur.

Temiz React kodu yazmak için Airbnb JavaScript Stil Kılavuzu gibi bir stil kılavuzu seçmenizi ve buna bağlı kalmanızı öneririm.

SEO

React çoğunlukla tek sayfalı uygulamalar (SPA’lar) oluşturmak için kullanılır. SPA’lar, işlemek için yeterli miktarda JavaScript çalıştırması gereken oldukça dinamik sitelerdir. Bunun da ötesinde SPA’lar net bir site yapısı tanımlamaz. Bu iki özellik, web tarayıcıları ve robotlar site yapısını anlayamadığından veya sitenin içeriğini almak için JavaScript çalıştıramadığından, onları SEO için daha az uygun hale getirir.

Görünümlerde Mantık

React, mantık ve görünümler arasında net bir ayrım tanımlamaz. Bunun yerine, görünümlere bazı mantıkları dahil etmek iyi bir uygulama olarak kabul edilir (örn. koşullu işleme, map()). Geliştiriciler, özellikle de yeni başlayanlar bazen bunu yanlış yorumlar ve görünümlere çok fazla mantık ekler. Bu da kodu daha az okunabilir ve sürdürülebilir hale getirebilir.

React uygulaması nerede barındırılır?

Back4app Containers

Back4app Containers, dockerized uygulamaları kolaylıkla dağıtmanızı sağlayan harika bir Containers as a Service (CaaS) platformudur. Platform, dağıtım sürecini otomatikleştirerek geliştirme ve üretim arasındaki boşluğu doldurur. Docker tabanlı olduğu için herhangi bir uygulamayı dağıtmak için kullanabilirsiniz. Hepsinden iyisi, basit uygulamaları barındırmak ve prototip oluşturmak için kullanılabilecek ücretsiz bir katman sunar.

Diğer Back4app Containers avantajları şunlardır:

• Otomatik dağıtımlar
• Sıfır kesinti süresi güncellemeleri
• Gerçek zamanlı dağıtım takibi
• Gerçek zamanlı uygulama izleme
• Otomatik HTTPS/SSL sertifikası

Konteynerleştirme teknolojisi hakkında daha fazla bilgi edinmek ister misiniz? Konteynerler nedir?

Vercel

Vercel, statik ve hibrit uygulamaları dağıtmak için güçlü bir ön uç platformudur. Kullanımı kolay olduğu, fazla yapılandırma gerektirmediği ve ücretsiz bir katmana sahip olduğu için React/Next.js uygulamaları için popüler bir seçimdir. Üstelik uç işlevler, uygulama entegrasyonları ve gelişmiş analitik gibi en son teknolojileri de destekliyor.

Platform inanılmaz bir CI/CD entegrasyonuna sahip ve %99,99 çalışma süresini garanti ediyor. Ek olarak, Vercel kısa süre önce Postgres, KV, Blob ve Edge Config dahil olmak üzere dört farklı veritabanı türünü duyurdu.

Netlify

Netlify, web uygulamaları oluşturmak, dağıtmak ve ölçeklendirmek için bir Hizmet Olarak Platform (PaaS) bilgi işlem platformudur. Vercel ile benzer özellikler sunar ve onların en büyük rakibidir. Kullanımı son derece kolaydır ve ücretsiz bir katmanı vardır. Platform Ruby, Node, Python, PHP, Go ve Java dahil olmak üzere birçok programlama dilini yerel olarak desteklemektedir.

Platform temel olarak şirket web sitelerini, e-ticaret sitelerini, web uygulamalarını ve diğer büyük siteleri dağıtmak için kullanılır. Bulut bilişim şirketi iyi test edilmiştir ve 2014’ten beri faaliyet göstermektedir.

DigitalOcean App Platform

DigitalOcean App Platform, uygulamalar oluşturmak, dağıtmak ve ölçeklendirmek için basit, tamamen yönetilen bir altyapı çözümüdür. Web uygulamalarını, web sitelerini, API’leri, statik siteleri, web hizmetlerini ve daha fazlasını dağıtmak için kullanılabilir. Platform Python, Django, Go, PHP ve Node.js gibi birçok çerçeve ve programlama dilini yerel olarak destekler. Bunun da ötesinde, yerleşik güvenlik özelliklerine sahiptir, geri dönüşleri, uyarıları, gelişmiş günlükleri ve daha fazlasını destekler.

App Platform’u Yönetilen Veritabanları, Nesne Depolama ve Bulut Fonksiyonları gibi diğer DO ürünleriyle kolayca birleştirebilirsiniz.

Bir React uygulaması nasıl barındırılır?

Bu makale bölümünde, Back4app Containers‘a bir React uygulamasının nasıl derleneceğini ve dağıtılacağını inceleyeceğiz.

Ön Koşullar

• JavaScript ES6 ile deneyim
• React ve React Hooks ile deneyim
• Docker (ve konteynerizasyon teknolojisi) hakkında temel bilgi
• Node.js ve yerel makinenizde yüklü bir JavaScript IDE

Projeye Genel Bakış

React ve Back4app Containers’ın gücünü göstermek için basit bir pomodoro zamanlayıcı web uygulaması oluşturacağız. Zamanlayıcının iki aşaması olacak, “odak aşaması” ve “dinlenme aşaması”. Bir aşama bittikten sonra otomatik olarak diğer aşamaya geçecek. Önce uygulamayı kodlayacağız, sonra dockerize edeceğiz ve son olarak Back4app Containers‘a dağıtacağız.

Yalnızca dağıtım süreciyle ilgileniyorsanız “Uygulama Oluştur” bölümünü atlayabilirsiniz.

Uygulama Oluştur

Bu bölümde, yeni bir React projesi oluşturacağız, ChakraUI’yi kuracağız ve uygulama mantığını uygulayacağız.

React Uygulaması Oluşturma

Create React App (CRA) aracını kullanarak yeni bir React uygulaması oluşturarak başlayın:

$ npx create-react-app react-pomodoro

Bu araç proje dizin yapısını oluşturacak, React’i bağımlılıklarıyla birlikte yükleyecek ve bunları package-lock.json dosyasında donduracaktır.

Ardından, yeni oluşturulan uygulamaya gidin:

$ npx react-pomodoro

Geliştirme sunucusunu başlatın:

$ npm start

Son olarak, favori tarayıcınızda http://localhost:3000/ adresini açın ve varsayılan React açılış sayfasını görebildiğinizden emin olun.

ChakraUI’yi yükleyin

UI/UX oluşturma sürecini basitleştirmek için çok yönlü ve kullanıcı dostu bir bileşen kütüphanesi olan ChakraUI‘yi kullanacağız.

Komut satırı arayüzünüzü açın ve Chakra’yı bağımlılıkları ile birlikte yükleyin:

$ npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Ardından, index.js dosyasına gidin ve tüm uygulamanızı :

// src/index.js

// ...
import {ChakraProvider} from "@chakra-ui/react";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ChakraProvider>
      <App/>
    </ChakraProvider>
  </React.StrictMode>
);

Harika, ChakraUI’yi başarıyla yüklediniz. Artık Chakra’nın bileşenlerini, şekillendirilmiş sistemlerini, kancalarını ve Chakra’nın sunduğu diğer her şeyi kullanabilirsiniz.

Sabitler

Projeye genel bakışta belirtildiği gibi uygulamamız iki aşamalı olacaktır:

1. Odaklanma aşaması (25 dakika)
2. Dinlenme aşaması (5 dakika)

Uygulama mantığını uygulamaya başlamadan önce, App.js dosyasının üst kısmında birkaç sabit tanımlayalım:

// src/App.js

// ...

const FOCUS_KEY = "focus";
const REST_KEY = "rest";

const FOCUS_TIME = 25 * 60;  // 25 minutes, specified in seconds
const REST_TIME = 5 * 60;    // 5 minutes, specified in seconds

const phaseStyles = {
  [FOCUS_KEY]: {
    color: "#ffffff",
    background: "#DF675B",
    backgroundSecondary: "#e1796e",
  },
  [REST_KEY]: {
    color: "#ffffff",
    background: "#71bd4b",
    backgroundSecondary: "#81c260",
  },
};

function App() {
  // ...
}

export default App;

Sürekli özet:

1. FOCUS_KEY ve REST_KEY aşamaları tanımlamak için kullanılan anahtarlardır.
2. FOCUS_TIME ve REST_TIME aşamaların süresini tanımlar (saniye cinsinden).
3. phaseStyles hem odak hem de dinlenme aşaması için CSS stilini tanımlar. Bizim durumumuzda odak aşaması kırmızı ve dinlenme aşaması yeşildir.

Bu sabitler hakkında çok fazla endişelenmeyin, önümüzdeki birkaç bölümden sonra her şey anlamlı hale gelecektir.

Kullanıcı Arayüzü

Ardından, kullanıcı arayüzünü oluşturmak için App bileşenini değiştirin:

// src/App.js

import {Box, Button, Container, Heading, Link} from "@chakra-ui/react";
import {useEffect, useRef, useState} from "react";

// ...

function App() {

  const [phase, setPhase] = useState(FOCUS_KEY);
  const [timeLeft, setTimeLeft] = useState(FOCUS_TIME);
  const [isRunning, setIsRunning] = useState(false);
  const intervalRef = useRef(null);

  const onFocusClick = () => {};

  const onRestClick = () => {};

  const onStartClick = () => {};

  return (
    <Box
      width="100%" height="100vh"
      background={phaseStyles[phase].background}
      color={phaseStyles[phase].color}
    >
      <Container width="container.xl" py={12} centerContent>
        <Box my={2}>
          <Heading as="h1">react-pomodoro</Heading>
          <Heading as="h2" size="md">a simple react pomodoro app</Heading>
        </Box>
        <Box
          width="100%" display="flex" flexDirection="row"
          color={phaseStyles[phase].background}
          my={2}
        >
          <Button width="100%" mr={2} onClick={onFocusClick}>Focus</Button>
          <Button width="100%" ml={2} onClick={onRestClick}>Rest</Button>
        </Box>
        <Box
          width="100%" display="flex" justifyContent="center"
          background={phaseStyles[phase].backgroundSecondary}
          p={8} my={2} rounded="md"
        >
          <Heading size="4xl">{timeLeft}</Heading>
        </Box>
        <Box width="100%" my={2}>
          <Button 
            width="100%" color={phaseStyles[phase].background}
            onClick={onStartClick}
          >
            {isRunning ? "Pause" : "Start"}
          </Button>
        </Box>
      </Container>
    </Box>
  );
}

export default App;

1. Kullanıcı arayüzünü oluşturmak için Chakra’nın bileşenlerini ( Kutu, Düğme ve Etiket gibi) kullandık.
2. Phase, timeLeft ve isRunning için state tanımlamak üzere React’in useState() kancasını kullandık.
3. Düğmeler tarafından tetiklenen onFocusClick(), onRestClick() ve onStartClick( ) gibi kukla fonksiyonlar tanımladık.

Sunucuyu şimdi yeniden başlatır ve http://localhost:3000 adresini ziyaret ederseniz şöyle bir şey görmeniz gerekir:

İyi görünüyor, ancak timeLeft daha kullanıcı dostu bir biçime sahip olsaydı daha iyi görünürdü. Sadece saniyeleri görüntülemek yerine, timeLeft ‘i ayrıştırabilir ve 00:00 gibi kalan dakika ve saniyeleri görüntüleyebiliriz.

Bunu başarmak için App.js dosyasının üst kısmında aşağıdaki fonksiyonu tanımlayın:

// src/App.js

const formatTime = (timeInSeconds) => {
  const remainingMinutes = Math.floor(timeInSeconds / 60);
  const remainingSeconds = timeInSeconds % 60;
  return `
      ${String(remainingMinutes).padStart(2, "0")}:
      ${String(remainingSeconds).padStart(2, "0")}
      `;
};

// ...

Sonra bunu JSX’inizde şu şekilde kullanın: timeFormat(timeLeft).

Mantık

Uygulama mantığını tanımlamak için tıklama işlevlerini aşağıdaki gibi değiştirin:

// src/App.js

function App() {

  // ...

  const onFocusClick = () => {
    setPhase(FOCUS_KEY);
    setTimeLeft(FOCUS_TIME);
    setIsRunning(false);
  };

  const onRestClick = () => {
    setPhase(REST_KEY);
    setTimeLeft(REST_TIME);
    setIsRunning(false);
  };

  const onStartClick = () => {
    setIsRunning(!isRunning);
  }

  // ...
}

1. useFocusClick() fazı odak olarak değiştirir, zamanı sıfırlar ve zamanlayıcıyı durdurur
2. onRestClick() işlevi useFocusClick() işlevine benzer şekilde çalışır, ancak dinlenme aşaması için
3. onStartClick() isRunning durumunu değiştirir.

Ardından, her saniye geri sayan bir aralıkla useEffect() işlevini ekleyin:

// src/App.js

function App() {

  // ...

  useEffect(() => {
    if (isRunning) {
      intervalRef.current = setInterval(() => {
        setTimeLeft(prevState => {
          if (prevState <= 0) {
            setPhase(phase === FOCUS_KEY ? REST_KEY : FOCUS_KEY);
            setIsRunning(false);
            return phase === FOCUS_KEY ? REST_TIME : FOCUS_TIME;
          } else {
            return prevState - 1;
          }
        });
      }, 1000);
    }
    return () => clearInterval(intervalRef.current);
  }, [isRunning, phase]);

  // ...
}

İşte bu kadar! Geliştirme sunucunuzu çalıştırın ve uygulamayı test edin. Her şey yolunda giderse, “başlat” tuşuna bastığınızda zamanlayıcı geri saymalı, “duraklat” tuşuna bastığınızda duraklamalı ve zamanlayıcı sıfıra ulaştığında aşamalar otomatik olarak değişmelidir.

Dockerize Uygulaması

Bir React uygulamasını Back4app Containers’a dağıtmak için önce onu dockerize etmeniz gerekir. Bir uygulamayı dockerize etmek için genellikle aşağıdakileri yapmanız gerekir:

1. Bir Docker dosyası tanımlayın.
2. Bir .dockerignore dosyası oluşturun.
3. Görüntüyü oluşturun ve yerel olarak test edin.

Bu adımları uygulayalım.

Dockerfile

Dockerfile, Docker motorunun bir görüntü oluşturmak için gerçekleştirmesi gereken tüm talimatları içeren düz bir metin belgesidir. Bu talimatlar çalışma dizinini, temel görüntüyü ayarlamak, dosyaları kopyalamak, komutları çalıştırmak vb. için kullanılabilir. Talimatlar genellikle büyük harflerle yazılır ve doğrudan argümanlar tarafından takip edilir. Örnek:

INSTRUCTION arguments

Dockerfile talimatları hakkında daha fazla bilgi için Dockerfile referansına göz atın.

Temel bir React Docker dosyası aşağıdaki gibi görünecektir:

FROM node:18-alpine
WORKDIR /app

COPY package.json ./
COPY package-lock.json ./
RUN npm ci

COPY . .

RUN npm run build
RUN npm install -g serve

EXPOSE 5000

CMD ["serve", "-s", "build", "-l", "5000"]

Bu Dockerfile, Alpine Node.js imajını temel alan bir imaj oluşturur. Çalışma dizinini ayarlar, bağımlılıklar dosyasını kopyalar ve yükler, ardından uygulamayı oluşturur ve son olarak serve paketi aracılığıyla servis eder.

Satır satır açıklama için Back4app Containers dokümanlarına göz atın.

Bu görüntü çalışır, ancak çok aşamalı derlemelerden yararlanarak bunu optimize edebiliriz. Çok aşamalı derlemeler, imaj boyutunu optimize etmemize, hata ayıklama sürecini basitleştirmemize, derleme sürecini daha hızlı hale getirmek için önbelleğe alınmış imajları kullanmamıza vb. olanak tanır.

Devam edin ve proje kök dizininde Dockerfile adında aşağıdaki içeriğe sahip yeni bir dosya oluşturun:

FROM node:18-alpine as dependencies
WORKDIR /home/app

COPY package.json ./
COPY package-lock.json ./
RUN npm ci

# =====================================================================================

FROM node:18-alpine AS builder
WORKDIR /home/app

COPY --from=dependencies /home/app/node_modules ./node_modules
COPY . .

ENV NODE_ENV="production"

RUN npm run build

# =====================================================================================

FROM node:18-alpine AS runner
WORKDIR /home/app

COPY --from=builder /home/app/build ./build

RUN npm install -g serve

EXPOSE 3000
ENV PORT 3000

CMD ["serve", "-s", "build", "-l", "3000"]

Bu Docker dosyasının üç aşaması vardır:

1. package.json dosyasını kopyalayan ve bağımlılıkları yükleyen bağımlılıklar aşaması
2. görüntüyü oluşturmak için önceki aşamadaki bağımlılıkları kullanan oluşturucu aşaması
3. kurucu aşama çıkışını alan ve uygulamaya hizmet eden koşucu aşama

Çok aşamalı derlemeyi kullanarak görüntü boyutunu yaklaşık %40 oranında azaltacağız ve görüntü derlemelerini büyük ölçüde hızlandıracağız.

.dockerignore

Projemiz, üretim derlemesinde ihtiyaç duymadığımız bazı dosyalar içerir, örneğin node_modules, .git vb. Bunları imajdan hariç tutmak için bir .dockerignore dosyası kullanabiliriz.

Proje kök dizininde aşağıdaki içeriğe sahip bir .dockerignore dosyası oluşturun:

.idea/
.git/

/node_modules
/.next/
/out/
/build

.env*.local
.vercel

İhtiyaçlarınıza göre değiştirmekten çekinmeyin.

Oluşturun ve Test Edin

Görüntülerinizi buluta göndermeden önce yerel olarak test etmek iyi bir fikirdir. Bunu yapmak için Docker Engine/Docker Desktop ‘ın kurulu olması gerekir. İlk olarak, Docker sürümünüzü çalıştırarak kontrol edin:

$ docker --version

Docker version 20.10.22, build 3a2c30b

Ardından, react-pomodoro görüntüsünü oluşturun ve etiketleyin:

$ docker build -t react-pomodoro:1.0 .

Ardından bir konteyneri döndürmek için yeni oluşturulmuş imajı kullanın:

$ docker run -p 3000:3000 -d react-pomodoro:1.0

Argüman açıklaması:

1. – port için -p kısaltması 3000 portunu 3000‘e bağlar.
2. -d kısaltması --detached konteyneri detached modda (terminal dışında) çalıştırır
3. react-pomodoro:1.0 hangi görüntüyü kullanmak istediğinizi belirtir

Çalışan konteynerleri kontrol edin:

$ docker ps

Uygulamanız artık yerel olarak bir kapsayıcıda çalışıyor. Favori web tarayıcınızda http://localhost:3000 adresine giderek çalıştığından emin olun.

GitHub Deposu

Bir uygulamayı Back4app Containers’a dağıtmak için öncelikle kaynak kodunuzu GitHub‘a göndermeniz gerekir. Bu adımları takip edebilirsiniz:

1. GitHub’da bir hesap oluşturun.
2. Yeni bir GitHub deposu oluşturun.
3. Yerel projenize gidin ve git init aracılığıyla depoyu başlatın.
4. git add . aracılığıyla tüm kaynak kodunu VCS’ye ekleyin (dosyaları yok saymak için bir .gitignore dosyası kullanabilirsiniz).
5. Remote origin’i git remote add origin aracılığıyla ekleyin.
6. Kodu git commit -m "initial commit" aracılığıyla işleyin.
7. Kodu git push origin master aracılığıyla gönderin.

Git ile hiç çalışmadıysanız bu videoya göz atmaktan çekinmeyin).

Uygulama Dağıtma

Back4app Containers’a bir uygulama dağıtmak için öncelikle bir hesap oluşturmanız gerekir.

Back4app hesabınıza giriş yaptıktan sonra, uygulama kontrol panelinize yönlendirileceksiniz. Uygulamanızı oluşturmaya başlamak için “Yeni uygulama oluştur” düğmesine tıklayın.

Back4app hem BaaS (Backend as a Service) hem de CaaS (Containers as a Service) çözümleri sunmaktadır. Bir konteyner konuşlandırdığımız için “CaaS “ı seçin.

Ardından, GitHub hesabınızı Back4app ile bağlamanız ve daha önce oluşturduğunuz depoyu içe aktarmanız gerekecektir.

Back4app Containers gelişmiş yapılandırmaya izin verir, ancak basit uygulamamız için yalnızca uygulama adını sağlamamız gerekir. Uygulama adını girdikten sonra, dağıtım sürecini başlatmak için “Deploy “a tıklayın.

Uygulamanızın dağıtılması için yaklaşık 5 dakika bekleyin. Dağıtım tamamlandığında. Uygulamayı tarayıcınızda açmak için ekranın sol tarafındaki yeşil bağlantıya tıklayın.

İşte bu kadar! Uygulamanız artık başarıyla dağıtıldı ve sağlanan bağlantı üzerinden erişilebilir durumda. Ayrıca, Back4app uygulamanız için otomatik olarak ücretsiz bir SSL sertifikası yayınladığından, uygulamanıza HTTPS üzerinden erişilebildiğini fark edebilirsiniz.

Sonuç

React, kullanıcı arayüzleri oluşturmak için en iyi açık kaynaklı ön uç JavaScript kütüphanelerinden biridir. Bu makalede React’in avantajlarını, dezavantajlarını ve kendi React uygulamanızı nasıl oluşturacağınızı öğrendiniz. Bunun da ötesinde, artık bir React uygulamasını Back4app Containers üzerinde nasıl barındıracağınızı biliyorsunuz.

Nihai kaynak kodu GitHub‘da bulunabilir.

SSS