یکی از چالش‌هایی که همیشه برای ایجاد و استقرار برنامه های ری اکت یا هر برنامه‌ی ‌‌Front-End‌ای که به صورت ایستا و  بدون پشتیبانی سرور هستن، وجود داره، اینه که مسیرهای برنامه از بین می‌رن. یعنی از داخل برنامه می‌تونین دسترسی داشته باشین و به صفحه‌های مختلف برین، اما اگر بخواین به طور مستقیم صفحه‌ای رو باز کنین با صفحه‌ای مثل تصویر زیر رو‌به‌رو می‌شین:

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

Nginx برای نجات وارد صحنه می‌شود!

می‌خوایم بگیم که چطوری می‌تونیم با استفاده از Nginx و داکر، توی پروژه‌های ایستا مثل برنامه‌های ری اکت مسیرهای ایستا ایجاد کنیم.

اول نیاز داریم که پیکربندی Nginx رو برای سرورمون ایجاد کنیم. اسم فایل پیکربندی Nginx.conf است.

شروع می‌کنیم به ایجاد کردن این فایل و کدنویسی‌های مربوط به اون:

 # auto detects a good number of processes to run
worker_processes auto;

 
#Provides the configuration file context in which the directives that affect connection processing are specified.
events {
   # Sets the maximum number of simultaneous connections that can be opened by a worker process.
   worker_connections 8000;
   # Tells the worker to accept multiple connections at a time
   multi_accept on;
}

 
http {
   # what times to include
   include       /etc/nginx/mime.types;
   # what is the default one
   default_type  application/octet-stream;

 
   # Sets the path, format, and configuration for a buffered log write
   log_format compression '$remote_addr - $remote_user [$time_local] '
       '"$request" $status $upstream_addr '
       '"$http_referer" "$http_user_agent"';

 
   server {
       # listen on port 80
       listen 80;
       # save logs here
       access_log /var/log/nginx/access.log compression;

 
       # where the root here
       root /var/www;
       # what file to server as index
       index index.html index.htm;

 
       location / {
           # First attempt to serve request as file, then
           # as directory, then fall back to redirecting to index.html
           try_files $uri $uri/ /index.html;
       }

 
       # Media: images, icons, video, audio, HTC
       location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
         expires 1M;
         access_log off;
         add_header Cache-Control "public";
       }

 
       # Javascript and CSS files
       location ~* \.(?:css|js)$ {
           try_files $uri =404;
           expires 1y;
           access_log off;
           add_header Cache-Control "public";
       }

 
       # Any route containing a file extension (e.g. /devicesfile.js)
       location ~ ^.+\..+$ {
           try_files $uri =404;
       }
   }
}

این یک پیکربندی استاندارد برای Nginx است.
با این کد مشخص می‌کنیم که برنامه‌هامون کجا نشون داده بشن و اطلاعات حافظه کش چه زمانی از بین برن.

یک سری کارهایی هم برای 404 و Logs انجام دادیم.

توی این پیکربندی gzip رو فعال نکردیم اما اگر می‌خواین نمونه‌ای از اون رو ببینین پیشنهاد می‌کنم به این صفحه  نگاهی بندازین.

وقت استفاده از داکر رسیده!

خب الان که پیکربندی Nginx رو داریم، می تونیم Dockerfile رو ایجاد کنیم.
این کار رو با مشخص کردن Image اصلی که می‌خوایم استفاده کنیم، شروع می‌کنیم:

 FROM nginx:1.15.2-alpine

بعد از این، باید به داکر بگیم که چه چیزی برای اجرای برنامه‌ی ما نیاز است.
در این حالت باید سه کار رو انجام بدیم:

• پوشه build رو روی /var / www  کپی کنیم.
• nginx.conf رو توی پوشه‌ی اون توی / etc / nginx / کپی کنیم.
• پورت 80 رو به صورت Public یا عمومی، Expose کنیم، چون همون پورتی است که در پیکربندی Nginx از اون استفاده می‌کنیم.

جزئیات نحوه انجام این کار رو در ادامه می‌گیم:

 FROM nginx:1.15.2-alpine
COPY ./build /var/www
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

در آخر هم باید بهش بگیم که چه دستوراتی رو اجرا کنه.

برای این کار از Nginx CLI استفاده می‌کنیم و اون رو به عنوان ورودی توی Dockerfile می‌ذاریم:

 FROM nginx:1.15.2-alpine
COPY ./build /var/www
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
ENTRYPOINT ["nginx","-g","daemon off;"]

همونطور که دیدین Nginx رو با -g daemon off اجرا کردیم. طوری که Nginx در پیش‌زمینه فعال بمونه تا داکر بتونه روند صحیح کار رو ادامه بده (در غیر این صورت کانتینر شما بلافاصله بعد از شروع، متوقف می‌شه).

اگر اطلاعات بیشتری هم بخواین می‌تونین اینجا بخونین.

حالا می‌تونین Image رو با استفاده از دستور زیر بسازین:

 docker build --rm -f Dockerfile -t rick-morty-random-episode:latest .

و بعد دستور زیر رو اجرا کنین:

docker run --rm -d -p 80:80 rick-morty-random-episode:latest

خب

یاد گرفتیم که از این به بعد چطور توی پروژه‌های استاتیک، مسیرهای ایستا داشته باشیم!

اگر کسی به هر مسیری در Web App شما برخورد کنه، این صفحه به index.html می‌ره و برنامه‌ی شما بی‌عیب و نقص کار می‌کنه.