https://github.com/leolanese/react-dockerizing-app
react-dockerizing-app
https://github.com/leolanese/react-dockerizing-app
docker docker-compose reactjs
Last synced: about 2 months ago
JSON representation
react-dockerizing-app
- Host: GitHub
- URL: https://github.com/leolanese/react-dockerizing-app
- Owner: leolanese
- Created: 2021-01-04T20:20:30.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-01-04T20:52:19.000Z (over 5 years ago)
- Last Synced: 2026-01-13T03:33:22.293Z (6 months ago)
- Topics: docker, docker-compose, reactjs
- Language: JavaScript
- Homepage:
- Size: 210 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-dockerizing-app
react-dockerizing-app
## Running images
Our react app need two images: `one is a node for compiling and building`, and `the other is nginx for running our View`
## Working spaces
The working directory for `React`: `/my-app`, and for `nginx`: `/usr/share/nginx/html`
## Deploy My-App
```js
npx create-react-app my-app
cd my-app
npm start
```
## Create a docker image
Create a docker image from the docker file doing:
```js
docker image build -t / .
docker push /
```
## Test it
```js
docker container run -d -p 8080:80 /
```
## Composing images
We can docker-compose, to escale our container, also for speeding up the testing and building several images simultaneously in a better composable way.
```js
version: "3"
services:
ui-prod:
container_name: ui-prod
build:
context: .
dockerfile: DockerFile.prod
ports:
- "8080:80"
```
## Run docker-compose
```js
docker-compose up
```
---
### Further information
[ng-inx](http://nginx.org/en/docs/ngx_core_module.html)
[docker containers](https://www.docker.com/get-started)
[docker compose](https://docs.docker.com/compose/reference/help/)
---
### :100: Thanks!
#### Now, don't be an stranger. Let's stay in touch!
> I'm a passionately curious Front-end Engineer. I like sharing what I know, and learning what I don't. London, UK.
##### :radio_button: linkedin: @LeoLaneseltd
##### :radio_button: Twitter: @LeoLaneseltd
##### :radio_button: Portfolio: www.leolanese.com
##### :radio_button: DEV.to: dev.to/leolanese
##### :radio_button: Blog: leolanese.com/blog
##### :radio_button: Questions / Suggestion / Recommendation: developer@leolanese.com