DEV Community

Cover image for Dockerize Vite+ReactJS application
Oberg Agustin
Oberg Agustin

Posted on

Dockerize Vite+ReactJS application

This post shows how to dockerize a ReactJS app created with Vite using react-typescript template.

Implementation

In my opinion, the best way to do this goal, is using nginx image

Project config

package.json

 "scripts":  {
 "dev":  "vite",
 "build":  "tsc && vite build",
 "serve":  "vite preview"
 },
Enter fullscreen mode Exit fullscreen mode

Folders structure

   | --dist
   | --src
   | --.dockerignore
   | --Dockerfile
   | --package.json
   | --package-lock.json
   | --deploy 
   ----| --nginx
   --------| --nginx.config
Enter fullscreen mode Exit fullscreen mode

nginx.config file in folder deploy/nginx

map $sent_http_content_type $expires {
default off;
text/html 15m;
text/css 15m;
application/javascript 15m;
~image/ 15m;
}
server {

listen 80;
root /usr/share/nginx/html;
index index.html;
etag on;
expires $expires;
location / {
try_files $uri @prerender;
}
location @prerender {
proxy_set_header X-Prerender-Token GsMLRmorzgxywljuDowD;

set $prerender 0;
if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp|Screaming Frog SEO Spider") {
set $prerender 1;
}
if ($args ~ "escaped_fragment") {
set $prerender 1;
}
if ($http_user_agent ~ "Prerender") {
set $prerender 0;
}
if ($uri ~* ".(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
set $prerender 0;
}

#resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
resolver 8.8.8.8;

if ($prerender = 1) {

#setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing
set $prerender "service.prerender.io";
rewrite .* /$scheme://$host$request_uri? break;
proxy_pass http://$prerender;
}
if ($prerender = 0) {
rewrite .* /index.html break;
}
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}

Enter fullscreen mode Exit fullscreen mode




Dockerfile


FROM mhart/alpine-node:12 AS builder
WORKDIR /app
COPY . .
RUN yarn install
RUN yarn run build
FROM nginx:1.16.0-alpine
COPY --from=builder /app/dist /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY deploy/nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Enter fullscreen mode Exit fullscreen mode




Documentation

Docker
NGINX
Vite JS

Top comments (0)