Deploying statics to S3 / CloudFront

[andrewmclagan]

Anyone had any success deploying the production ready statics (js, css img) to the amazon CloudFront CDN?

[mmahalwy]

Yes, we use a docker container to run our server and upload to s3. I can share some code if that helps?

[andrewmclagan]

That would be awesome, also using docker.

[simonas-notcat]

I'm also trying to use docker, but keep getting these errors: [...] [0] [webpack-isomorphic-tools] (waiting for the first Webpack build to finish) [0] [webpack-isomorphic-tools] (waiting for the first Webpack build to finish)

@mmahalwy it would really help to see your Dockerfile.

[mmahalwy]

@andrewmclagan @simonas-notcat here you go: the variables you need to replace are uppercased.

FROM node:5.1.1

#Install AWS CLI
RUN apt-get update
RUN apt-get install -y python-pip
RUN pip install awscli
RUN mkdir -p /root/.aws
RUN echo '[default]' > /root/.aws/config
RUN echo 'output = json' >> /root/.aws/config
RUN echo 'region = us-east-1' >> /root/.aws/config
RUN echo '[default]' > /root/.aws/credentials
RUN echo 'aws_access_key_id = AWS_ACCESS_KEY' >> /root/.aws/credentials
RUN echo 'aws_secret_access_key = AWS_SECRET_KEY' >> /root/.aws/credentials
RUN chmod 600 /root/.aws/config
RUN chmod 600 /root/.aws/credentials

# cache npm install when package.json hasn't changed
WORKDIR /tmp
ADD package.json package.json
RUN npm install
RUN npm install -g pm2

RUN mkdir /project
RUN cp -a /tmp/node_modules /project

WORKDIR /project
ADD . /project/

ENV NODE_ENV production
ENV API_URL SOME_URL
ENV ASSETS_URL https://CLOUDFRONT_ID.cloudfront.net/assets/

RUN npm run build

# upload js and css
WORKDIR /project/build

# UPLOAD TO S3!
WORKDIR /project/static
RUN aws s3 cp dist s3://AWS_ASSETS_PATH/assets --recursive --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers

# go back to /project
WORKDIR /project

ENV NODE_PATH "./src"
ENV HOST 127.0.0.1
ENV PORT 8000
ENV DISABLE_SSR false

EXPOSE 8000
CMD ["pm2", "start", "./bin/server.js", "--no-daemon", "-i", "0"]

[andrewmclagan]

That is awesome :-) and very similar to our Dockerfile. Although we are using 4.3.0 with intentions to migrate to 5.x.x soon.

When in development are you changing the ASSETS_URL var to the local dev webpack output?

I created a gist https://gist.github.com/andrewmclagan/c3af8fcad799fbe02ef0 for further discussion if needed.

[andrewmclagan]

@simonas-notcat just a note, do not try and use Docker in a mounted volume on local development with virtualbox. The virtualbox default filesystem will give you nightmares just run int locally.

[mmahalwy]

@andrewmclagan i am not using Docker in dev. Dev is setting envs from package.json

[andrewmclagan]

@mmahalwy The very same for us.

If anyone is interested our docker-compose file is as follows, the API is actually a PHP Laravel installation.

version: "2"

services:  

    load_balancer:
        image: tutum/haproxy
        ports:
            - "80:80"   
            - "443:443"    

    cache:
        image: bitnami/redis
        environment:
            - REDIS_PASSWORD=secret
        ports:
            - "6379:6379"        

    database:
        image: bitnami/mariadb
        environment:
            - MARIADB_DATABASE=secret 
            - MARIADB_PASSWORD=secret
        ports:
            - "3306:3306"         

    api:
        build: ./api   
        volumes:
            - ./ethical-jobs-api:/var/www
        environment:
            - DB_DATABASE=secret          
            - DB_PASSWORD=secret  
            - REDIS_PASSWORD=secret
            - VIRTUAL_HOST=my-app-api 

    web:
        build: ./web
        environment:
            - VIRTUAL_HOST=my-app-web