├── Dockerfile ├── LICENSE ├── README.md ├── entrypoint.sh ├── example ├── .gitlab-ci.yml ├── Dockerfile └── README.md └── nginx.vh.default.conf /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM alpine 2 | 3 | RUN apk add --no-cache alpine-sdk && \ 4 | cd /tmp && curl -s -LO https://github.com/jpmens/jo/releases/download/v1.1/jo-1.1.tar.gz && \ 5 | tar xzf jo-1.1.tar.gz && \ 6 | cd jo-1.1 && \ 7 | ./configure && \ 8 | make check && \ 9 | make install 10 | 11 | FROM nginx:alpine 12 | 13 | COPY nginx.vh.default.conf /etc/nginx/conf.d/default.conf 14 | COPY entrypoint.sh /usr/local/bin/start-app 15 | COPY --from=0 /usr/local/bin/jo /usr/local/bin/jo 16 | 17 | RUN chmod +x /usr/local/bin/start-app && \ 18 | chmod +x /usr/local/bin/jo && \ 19 | mkdir /app 20 | 21 | WORKDIR /app 22 | 23 | ENTRYPOINT [ "sh", "/usr/local/bin/start-app" ] -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 INLOOPX 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cra-docker 2 | 3 | Create statically built Create React App applications docker images for easy deployment with environment variables support at runtime. 4 | 5 | This project was created to solve known problem with CRA in favor of 12 factor apps. 6 | See https://github.com/facebook/create-react-app/issues/2353 7 | 8 | ## Usage 9 | 10 | All you need to do is get the content of built app (`build` folder) inside docker image in `/app` folder. 11 | 12 | To get this working firstly create `Dockerfile` in your project root with content: 13 | 14 | ``` 15 | FROM inloopx/cra-docker 16 | 17 | COPY build /app 18 | ``` 19 | 20 | then you can call: 21 | 22 | ``` 23 | # or npm run build 24 | yarn build 25 | docker build -t my-new-app . 26 | ``` 27 | 28 | Once the build is done, you should have your image ready. To verify it, run the image bind to 8080 port: 29 | 30 | ``` 31 | docker run --rm -p 8080:80 my-new-app 32 | ``` 33 | 34 | Now if you open [http://localhost:8080](http://localhost:8080) You should see your app. 35 | 36 | You can find more in [example](example) directory. Also if you use gitlab, don't miss the [pipeline configuration file example](example/.gitlab-ci.yml) 37 | -------------------------------------------------------------------------------- /entrypoint.sh: -------------------------------------------------------------------------------- 1 | echo "window.ENV = `jo \`env | grep REACT_APP_ | sed -e 's/[[:blank:]]/{_!!_}/g'\` end=1`" | sed -e 's/{_!!_}/ /g' > env.js 2 | nginx -g "daemon off;" -------------------------------------------------------------------------------- /example/.gitlab-ci.yml: -------------------------------------------------------------------------------- 1 | stages: 2 | - compile 3 | - build 4 | 5 | compile: 6 | image: node:8.4.0 7 | stage: compile 8 | tags: 9 | - docker 10 | artifacts: 11 | expire_in: 10 minutes 12 | paths: 13 | - build/ 14 | script: 15 | - yarn install 16 | - yarn build 17 | only: 18 | - develop 19 | - master 20 | 21 | build: 22 | image: inloopeu/devops 23 | stage: build 24 | tags: 25 | - docker 26 | services: 27 | - docker:dind 28 | script: 29 | - devops gitlab docker build 30 | only: 31 | - develop 32 | - master 33 | -------------------------------------------------------------------------------- /example/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM inloopx/cra-docker 2 | 3 | COPY build /app 4 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # cra-docker example 2 | 3 | This is just example of what you should/can have in your project structure. 4 | 5 | You can find more information in [inloop/devsops cra docs](https://github.com/inloop/devopscli/blob/master/docs/gitlab/docker-cra.md) 6 | -------------------------------------------------------------------------------- /nginx.vh.default.conf: -------------------------------------------------------------------------------- 1 | server { 2 | listen 80; 3 | server_name localhost; 4 | 5 | location / { 6 | root /app; 7 | index index.html index.htm; 8 | try_files $uri /index.html; 9 | } 10 | } --------------------------------------------------------------------------------