Tuesday, March 24, 2020

.NET Core React Projesinin Docker ile Linux Üzerinde Çalıştırılması - Running .NET Core React Project on Linux with Docker

Bildiğimiz üzere .NET Core projelerinin en büyük avantajlarından biri her türlü işletim sisteminde çalıştırılabilmesidir. Bunların yanında "Dependency Injection" vb. bir çok mimari geliştirmesi de geliştiricilere .NET Core ile sunulmaktadır. React ise front-end olarak kullanılan ve Babel derleyicisi (compiler) ile derlenen ve bir front-end teknolojisidir. React uygulamasını derlemek için NodeJs kullanmamız gerekir. JSX ise basitçe javascript içine HTML kodları yazmamızı sağlayan bir javascript uzantısıdır. Docker ise bir işletim sistemi üzerinde birbirinden izole, mikro servis mimarisine destek veren, her bir uygulamanın kendi çalışma ortamına sahip olduğu konteynerler  oluşturmamızı sağlayan teknolojidir. Bu yazıda konumuz bunlar olmadığı için bunlardan derinlemesine bahsedilmeyecektir.

Burada anlatacağımız örnek React için olsa da  Dockerfile içinde ilgili kısımlar güncellenerek diğer front-end teknojileri içinde çalıştırılabilir. Dockerfile konteynerlerimizi nasıl oluşturacağımızı belirttiğimiz dosyadır. Docker file Visual Studio (VS) üzerinden projenin üzerine sağ tıklanarak açılan menüden Add->Docker Support üzerinden oluşturulabilir.


Fakat buradan oluşturduğumuz Dockerfile içinde NodeJs kurumu içermediği için çalışmayacaktır. Bu sebeple imajlar üzerinde işlem yaparken aşağıdaki kod bloğu ile NodeJs kurulumlarının da yapılması gerekmektedir:

RUN apt-get update -yq \
    && apt-get install curl gnupg -yq \
    && curl -sL https://deb.nodesource.com/setup_10.x | bash \
    && apt-get install nodejs -yq

Yukarıda kod bloğu VS üzerinden oluşturduğumuz Dockerfile üzerine eklendiğinde dosyamızın son hali aşağıdaki gibi olacaktır:

#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.

FROM microsoft/dotnet:2.1-aspnetcore-runtime AS base

RUN apt-get update -yq \
    && apt-get install curl gnupg -yq \
    && curl -sL https://deb.nodesource.com/setup_10.x | bash \
    && apt-get install nodejs -yq

WORKDIR /app
EXPOSE 80
EXPOSE 443

FROM microsoft/dotnet:2.1-sdk AS build

RUN apt-get update -yq \
    && apt-get install curl gnupg -yq \
    && curl -sL https://deb.nodesource.com/setup_10.x | bash \
    && apt-get install nodejs -yq

WORKDIR /src
COPY ["TuringApp/TuringApp.csproj", "TuringApp/"]
RUN dotnet restore "TuringApp/TuringApp.csproj"
COPY . .
WORKDIR "/src/TuringApp"
RUN dotnet build "TuringApp.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "TuringApp.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .

ENTRYPOINT ["dotnet", "TuringApp.dll"]

Dockerfile hazır olduğuna göre sıra projemizi çalıştırmaya geldi. Bunun için proje kodlarımızı (kaynak kodlarını) derleme yapacağımız Linux üzerindeki bir klasöre kopyalıyoruz. Proje klasörümüzün hemen yanına da Dockerfile kopyalıyoruz. Daha açıklayıcı olması bakımından dosyaları kopyadıktan sonra klasör şöyle görünmelidir:


Bu aşamadan sonra Dockerfile kullanarak imaj oluşturmamız gerekiyor. Linux terminali açıyoruz ve ilk olarak aşağıdaki kodu çalıştırıyoruz:

sudo docker build -t firstcore .

Burada "firstcore" yeni oluşturacak imaja verdiğim isimdir. Siz kendinize göre isimlendirebilirsiniz.


İmajımız başarılı bir şekilde oluşturulursa terminalin son hali aşağıdaki gibi olacaktır:


Ayrıca aşağıdaki komutu kullanarak imajımızın docker tarafından listelendiğini görebiliriz:

sudo docker image ls


Bu aşamadan sonra sıra imajımızı çalıştırıp projemizi host etmeye geldi. Bunun için terminalde aşağıdaki komutu çalıştırıyoruz:

sudo docker run --name firstproj -p 8080:80 firstcore:latest


Run komutunda yer alan -p 8080:80 komutuyla 8080 portuna gelen istekleri uygulamamızın dinlediği 80 portuna yönlendiriyoruz. Name komutuyla konteyner ismini firstproj olarak verdik. Uygulamanın hangi portu dinlediği docker run komutunu çalıştırdıktan sonra teminalde görünmektedir. Bu aşamadan sonra tarayıcı üzerinden localhost:8080 üzerine istek yapıldığında projemiz tarayıcıda çalıştırılacaktır.



İşletim Sistemi:

Ubuntu 18.04.4 LST (Bionic Beaver)

Proje (Turing):

https://github.com/vyigity/TuringApp

Veri tabanı:

MySQL