Code and Deploy Angular to the Cloud
0 likes273 views
The document outlines the prerequisites and steps needed to deploy an Angular application to the cloud using Docker, including the use of Azure services. Key components include setting up Docker, creating a custom Docker image, and deploying to Azure App Service. Resources for further information are provided, including links to GitHub and Azure documentation.
![Dockerfile
FROM nginx:alpine
LABEL author="Simona Cotin"
COPY ./dist /usr/share/nginx/html
EXPOSE 80 443
ENTRYPOINT ["nginx","-g","daemon off;"]](https://image.slidesharecdn.com/angulartothecloudslidesangularconnect-171113152832/85/Code-and-Deploy-Angular-to-the-Cloud-23-320.jpg)
Code and Deploy Angular to the Cloud
- 1. Code and Deploy Angular to the Cloud
- 2. Prereq ▪ angular-cli ▪ Npm install -g @angular/cli ▪ Create a new app ▪ docker ▪ Brew cask install docker ▪ Docker pull nginx:alpine ▪ Github Account ▪ CircleCI Account ▪ Azure Account
- 3. Simona Cotin Cloud Dev Advocate @simona_cotin Asim Hussain Cloud Dev Advocate @jawache
- 6. CICD
- 11. Scary
- 12. Scary Not my job
- 13. Scary Not my job Mad terminal skills
- 16. DEMO
- 17. Can we do better?
- 18. Docker
- 20. DEMO
- 21. So how do we deploy?
- 22. Create a custom Docker Image
- 23. Dockerfile FROM nginx:alpine LABEL author="Simona Cotin" COPY ./dist /usr/share/nginx/html EXPOSE 80 443 ENTRYPOINT ["nginx","-g","daemon off;"]
- 24. $ docker build -t simonaco.azurecr.io/angular-cli-nginx:1.0 . Tag Repository Image name Version Build Context
- 29. Steps $ docker build -t simonaco.azurecr.io/ angular-cli-nginx:1.0 . $ docker login —username <your-username> —password <your-password> $ docker push simonaco.azurecr.io/angular- cli-nginx:1.0
- 30. DEMO
- 33. Simona Cotin Cloud Dev Advocate @simona_cotin Asim Hussain Cloud Dev Advocate @jawache
- 34. Resources ▪ https://github.com/simonaco/awesome-app ▪ https://www.ng-conf.org/build-deploy-angular-cloud/ ▪ https://youtu.be/61AgaccL9V8 ▪ https://azure.microsoft.com/services/container-registry/ ▪ https://docs.microsoft.com/en-us/azure/app-service/ containers/ ▪ https://circleci.com/