Skip to content

Commit bf837d6

Browse files
author
Denis Khrunov
committed
[DevOps] Create dev containers from build source; Added compile proto files in watch mode; Left one production images build
1 parent a115d61 commit bf837d6

File tree

14 files changed

+273
-462
lines changed

14 files changed

+273
-462
lines changed

‎.dockerignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ docker-compose*.yml
1010
# Build dependencies
1111
/node_modules
1212
/.angular
13-
# dist
1413

1514
# Environment (contains sensitive data)
1615
# **/.env

‎README.md‎

Lines changed: 103 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
# Testing account
2-
3-
Email: [email protected]
4-
5-
Password: qwerty78!
6-
71
# Fullstack Nest.js and Angular MFE application
82

93
This project was generated using [Nx](https://nx.dev).
@@ -18,89 +12,143 @@ These capabilities include generating applications, libraries, etc as well as th
1812

1913
Below are our core plugins:
2014

21-
- [React](https://reactjs.org)
22-
- `npm install --save-dev @nrwl/react`
23-
- Web (no framework frontends)
24-
- `npm install --save-dev @nrwl/web`
25-
- [Angular](https://angular.io)
26-
- `npm install --save-dev @nrwl/angular`
27-
- [Nest](https://nestjs.com)
28-
- `npm install --save-dev @nrwl/nest`
29-
- [Express](https://expressjs.com)
30-
- `npm install --save-dev @nrwl/express`
31-
- [Node](https://nodejs.org)
32-
- `npm install --save-dev @nrwl/node`
15+
- [React](https://reactjs.org)
16+
- `npm install --save-dev @nrwl/react`
17+
- Web (no framework frontends)
18+
- `npm install --save-dev @nrwl/web`
19+
- [Angular](https://angular.io)
20+
- `npm install --save-dev @nrwl/angular`
21+
- [Nest](https://nestjs.com)
22+
- `npm install --save-dev @nrwl/nest`
23+
- [Express](https://expressjs.com)
24+
- `npm install --save-dev @nrwl/express`
25+
- [Node](https://nodejs.org)
26+
- `npm install --save-dev @nrwl/node`
3327

3428
There are also many [community plugins](https://nx.dev/community) you could add.
3529

36-
## Notice
30+
## Code scaffolding
3731

38-
**In production build MFE will be don`t work correctly, because MfeOutletDirective create component dynamically.**
32+
Run `nx g @nrwl/angular:component my-component --project=my-app` to generate a new component.
3933

40-
The production build runs an optimizer that strips the needed information.
41-
You could turn off AOT (check the angular.json configuration) and in this case the module and components will be compiled and runtime.
42-
But still, when built for production, the names of the components will be minified.
34+
## Build
4335

44-
## Generate an MFE application
36+
Run `nx build my-app` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
4537

46-
**This project has custom nx generator to automate the creation of MFE applications.**
38+
## Running unit tests
4739

48-
Run `nx workspace-generator mfe my-mfe` to generate an MFE application.
40+
Run `nx test my-app` to execute the unit tests via [Jest](https://jestjs.io).
4941

50-
> You can select that type of MFE you want to create - host or remote
42+
Run `nx affected:test` to execute the unit tests affected by a change.
5143

52-
## Generate an application
44+
## Running end-to-end tests
5345

54-
Run `nx g @nrwl/angular:app my-app` to generate an application.
46+
Run `ng e2e my-app` to execute the end-to-end tests via [Cypress](https://www.cypress.io).
5547

56-
> You can use any of the plugins above to generate applications as well.
48+
Run `nx affected:e2e` to execute the end-to-end tests affected by a change.
5749

58-
When using Nx, you can create multiple applications and libraries in the same workspace.
50+
## Understand your workspace
5951

60-
## Generate a library
52+
Run `nx dep-graph` to see a diagram of the dependencies of your projects.
6153

62-
Run `nx g @nrwl/angular:lib my-lib` to generate a library.
54+
## Further help
6355

64-
> You can also use any of the plugins above to generate libraries as well.
56+
Visit the [Nx Documentation](https://nx.dev) to learn more.
6557

66-
Libraries are shareable across libraries and applications. They can be imported from `@nx-mfe/my-lib`.
58+
---
6759

68-
## Development host app
60+
## Backend
6961

70-
Run `nx serve client-shell-app` for a dev host app. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
62+
### Testing account
7163

72-
## Development MFE app
64+
Email: [email protected]
7365

74-
Run `nx serve client-auth-mfe` for a dev MFE. Navigate to http://localhost and the port specified in workspace.json or angular.json. The app will automatically reload if you change any of the source files.
66+
Password: qwerty78!
7567

76-
## Development server
68+
### Variants of running microservices in Docker
7769

78-
Run `nx serve server` for a dev server. Navigate to http://localhost:3000/. The app will automatically reload if you change any of the source files.
70+
---
7971

80-
## Code scaffolding
72+
#### Development mode:
8173

82-
Run `nx g @nrwl/angular:component my-component --project=my-app` to generate a new component.
74+
`nx run-many --target=serve-container --projects=server-mail-ms,server-auth-ms,server-users-ms,server-api-gateway ...`
8375

84-
## Build
76+
`docker compose -f docker-compose.dev.yml up -d`
8577

86-
Run `nx build my-app` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
78+
OR
8779

88-
## Running unit tests
80+
`nx serve-all-containers server-api-gateway`
8981

90-
Run `nx test my-app` to execute the unit tests via [Jest](https://jestjs.io).
82+
`docker compose -f docker-compose.dev.yml up -d`
9183

92-
Run `nx affected:test` to execute the unit tests affected by a change.
84+
OR
9385

94-
## Running end-to-end tests
86+
`npm run build-ms:watch`
9587

96-
Run `ng e2e my-app` to execute the end-to-end tests via [Cypress](https://www.cypress.io).
88+
`docker compose -f docker-compose.dev.yml up -d`
9789

98-
Run `nx affected:e2e` to execute the end-to-end tests affected by a change.
90+
AND optional start watch and compile grpc files:
9991

100-
## Understand your workspace
92+
`nx compile-proto-watch server-grpc`
10193

102-
Run `nx dep-graph` to see a diagram of the dependencies of your projects.
94+
OR
10395

104-
## Further help
96+
`npm run proto:watch`
10597

106-
Visit the [Nx Documentation](https://nx.dev) to learn more.
98+
---
99+
100+
#### Production OR CI/CD mode:
101+
102+
`nx run-many --target=deploy --projects=server-mail-ms,server-auth-ms,server-users-ms,server-api-gateway ...`
103+
104+
`docker compose -f docker-compose.prod.yml up -d`
105+
106+
OR
107+
108+
`nx affected --target=deploy`
109+
110+
`docker compose -f docker-compose.prod.yml up`
111+
112+
---
113+
114+
## Frontend
115+
116+
### Notice
117+
118+
**In production build MFE will be don`t work correctly, because MfeOutletDirective create component dynamically.**
119+
120+
The production build runs an optimizer that strips the needed information.
121+
You could turn off AOT (check the angular.json configuration) and in this case the module and components will be compiled and runtime.
122+
But still, when built for production, the names of the components will be minified.
123+
124+
### Generate an MFE application
125+
126+
**This project has custom nx generator to automate the creation of MFE applications.**
127+
128+
Run `nx workspace-generator mfe my-mfe` to generate an MFE application.
129+
130+
> You can select that type of MFE you want to create - host or remote
131+
132+
### Generate an application
133+
134+
Run `nx g @nrwl/angular:app my-app` to generate an application.
135+
136+
> You can use any of the plugins above to generate applications as well.
137+
138+
When using Nx, you can create multiple applications and libraries in the same workspace.
139+
140+
### Generate a library
141+
142+
Run `nx g @nrwl/angular:lib my-lib` to generate a library.
143+
144+
> You can also use any of the plugins above to generate libraries as well.
145+
146+
Libraries are shareable across libraries and applications. They can be imported from `@nx-mfe/my-lib`.
147+
148+
### Development host app
149+
150+
Run `nx serve client-shell-app` for a dev host app. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
151+
152+
### Development MFE app
153+
154+
Run `nx serve client-auth-mfe` for a dev MFE. Navigate to http://localhost and the port specified in workspace.json or angular.json. The app will automatically reload if you change any of the source files.

‎apps/server/api-gateway/Dockerfile‎

Lines changed: 15 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,29 @@
44

55
FROM node:16-alpine As development
66

7-
# Create app directory
8-
WORKDIR /usr/src/app
9-
10-
# Copy application dependency manifests to the container image.
11-
# A wildcard is used to ensure copying both package.json AND package-lock.json (when available).
12-
# Copying this first prevents re-running npm install on every code change.
13-
COPY package*.json ./
14-
15-
# Install app dependencies using the `npm install`
16-
RUN npm install
7+
# Create node directory, where we will be store node_modules
8+
WORKDIR /usr/src/node
179

18-
# Bundle app source
19-
COPY . .
10+
# Install global nodemon for hot module replacement serve
11+
RUN npm install -g nodemon
2012

21-
###################
22-
# BUILD FOR PRODUCTION
23-
###################
13+
# Copy package.json
14+
COPY dist/apps/server/api-gateway/package*.json ./
2415

25-
FROM node:16-alpine As build
16+
# Install deps
17+
RUN npm install
2618

19+
# Change directory to app
2720
WORKDIR /usr/src/app
2821

29-
# In order to run `npm run build` we need access to the Nx CLI.
30-
# The Nx CLI is a dev dependency,
31-
# In the previous development stage we ran `npm ci` which installed all dependencies.
32-
# So we can copy over the node_modules directory from the development image into this build image.
33-
COPY --from=development /usr/src/app/node_modules ./node_modules
34-
35-
COPY . .
22+
# Set path where we store node_modules
23+
ENV NODE_PATH=../node/node_modules
3624

37-
# Set NODE_ENV environment variable
38-
ARG NODE_ENV=production
39-
ENV NODE_ENV=${NODE_ENV}
25+
# Copy source files
26+
COPY dist/apps/server/api-gateway ./
4027

41-
# Run the build command which creates the production bundle
42-
RUN npx nx build server-api-gateway
28+
# Start app via nodemon
29+
CMD nodemon -L ./main.js
4330

4431
###################
4532
# PRODUCTION
@@ -49,25 +36,6 @@ FROM node:16-alpine As production
4936

5037
WORKDIR /usr/src/app
5138

52-
ENV PORT=3000
53-
EXPOSE ${PORT}
54-
55-
# Copy the bundled code from the build stage to the production image
56-
COPY --from=build /usr/src/app/dist/apps/server/api-gateway .
57-
58-
RUN npm install --production
59-
60-
# Start the server using the production build
61-
CMD node ./main.js
62-
63-
###################
64-
# PRODUCTION FROM NX
65-
###################
66-
67-
FROM node:16-alpine As production-nx
68-
69-
WORKDIR /usr/src/app
70-
7139
ARG NODE_ENV=production
7240
ENV NODE_ENV=${NODE_ENV}
7341

‎apps/server/api-gateway/project.json‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,32 @@
88
"options": {
99
"commands": [
1010
"nx build server-api-gateway",
11-
"docker build -f ./apps/server/api-gateway/Dockerfile . -t nx-mfe-api-gateway --target production-nx"
11+
"docker build -f ./apps/server/api-gateway/Dockerfile . -t nx-mfe-api-gateway --target production"
1212
],
1313
"parallel": false
1414
}
1515
},
16-
"serve-docker": {
16+
"serve-container": {
1717
"executor": "@nrwl/workspace:run-commands",
1818
"options": {
1919
"commands": [
20-
"npx nodemon -L --watch ./apps/server/api-gateway/src --watch ./libs/server --watch ./libs/shared -e '.ts,.js,.html,.css,.scss' --exec nx build server-api-gateway"
20+
"npx nodemon -L --watch ./apps/server/api-gateway/src --watch ./libs/server --watch ./libs/shared -e '.ts,.js,.html,.css,.scss' --exec nx run server-api-gateway:build"
2121
],
2222
"parallel": false
2323
}
2424
},
25+
"serve-all-containers": {
26+
"executor": "@nrwl/workspace:run-commands",
27+
"options": {
28+
"commands": [
29+
"nx run server-mail-ms:serve-container",
30+
"nx run server-auth-ms:serve-container",
31+
"nx run server-users-ms:serve-container",
32+
"nx run server-api-gateway:serve-container"
33+
]
34+
},
35+
"parallel": true
36+
},
2537
"build": {
2638
"executor": "@nrwl/node:webpack",
2739
"outputs": ["{options.outputPath}"],

0 commit comments

Comments
 (0)