hadyrashwan
4/25/2017 - 7:24 AM

nginx with docker for frontend local development

nginx with docker for frontend local development

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;
            root   /usr/share/nginx/app/public;

    location / {
    #        root   /usr/share/nginx/app/public; # this is your frontend code after build , change the  if the starting point isn't the public folder
        try_files $uri $uri/ /index.html =404;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html; ## replace those if you have a custom page with each error ,and what to use it .
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

     location /api { ## your backend needs to have /api in the url for the nginx do redirect the api calls to the dev enviroment
         proxy_redirect off;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto https;
         proxy_set_header Authorization $http_authorization;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header Host $http_host;
         proxy_set_header X-NginX-Proxy true;

         proxy_pass https://dev.domain.com; ## ${NGINX_PROXY_PASS_URL_DEV} //TODO will be used to prevent editing the file .
     }
}

Frontend local development enviroment

Setup

  • Install Docker from https://www.docker.com/get-docker and excute the command below with the following instructions .
  • In this example I use port 8080 to be exposed on the localhost , you can use any availble port on your machine .
  • Replace ~/path/to/dev.conf with the place you did put the dev.conf file.
  • Replace ~/path/to/app with your frontend code .
  • In the dev.conf replace the dev.domain.com with your backend hosted development enviroment(ask for it if you don't know the url).
$ sudo  docker run  --name frontend -v ~/path/to/app:/usr/share/nginx/app:ro  -v ~/path/to/dev.conf:/etc/nginx/conf.d/default.conf:ro -p 8080:80 -d nginx:stable-alpine
  • you will find the frontend on localhost:8080 in chrome

Workarounds

  • if you are on windows and using docker-toolbox or windows home edition and the only option is the docker-toolbox you will need to type an extra command.
docker-machine ssh default -L 8080:localhost:8080

Other tools you will probably need

  • Google Chrome.
  • npm or yarn .
  • install git , git-flow and ungit .
  • install a text editor e.g atom ,sublime , vs code or brackets .