[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"content-/blog/2024/08/06/gitlab-docker-python":3,"related-/blog/2024/08/06/gitlab-docker-python":769},{"id":4,"title":5,"author":6,"body":7,"cover":749,"date":750,"description":13,"draft":751,"excerpt":752,"extension":753,"github":20,"keywords":754,"meta":755,"navigation":756,"path":757,"seo":758,"shortDesc":752,"slug":759,"stem":760,"tags":761,"video":752,"__hash__":768},"blog/blog/2024/08/06/gitlab-docker-python.md","GitLab CI with Python and Docker!","Oz Shemesh",{"type":8,"value":9,"toc":727},"minimark",[10,24,27,32,67,71,77,182,186,189,196,208,211,225,228,255,258,261,265,271,328,331,335,338,358,365,368,372,375,381,385,388,408,414,418,432,436,439,453,456,473,479,484,492,519,523,532,536,539,543,546,573,577,580,651,657,661,664,668,693,697,720,723],[11,12,14],"info-box",{"type":13},"",[15,16,17],"p",{},[18,19,23],"a",{"href":20,"rel":21},"https://gitlab.com/devozs/counter-service",[22],"nofollow","Show me the Code!",[15,25,26],{},"This is a simple Flask application that counts the number of POST and GET requests it receives.",[28,29,31],"h2",{"id":30},"setup","Setup",[33,34,35,49,58],"ol",{},[36,37,38,39],"li",{},"Clone the repository:",[40,41,46],"pre",{"className":42,"code":44,"language":45},[43],"language-text","git clone https://gitlab.com/devozs/counter-service\ncd counter-service\n","text",[47,48,44],"code",{"__ignoreMap":13},[36,50,51,52],{},"Create a virtual environment and activate it:",[40,53,56],{"className":54,"code":55,"language":45},[43],"python -m venv venv\nsource venv/bin/activate  # On Windows, use `venv\\Scripts\\activate`\n",[47,57,55],{"__ignoreMap":13},[36,59,60,61],{},"Install the requirements:",[40,62,65],{"className":63,"code":64,"language":45},[43],"pip install -r requirements.txt\n",[47,66,64],{"__ignoreMap":13},[28,68,70],{"id":69},"project-structure","Project Structure",[40,72,75],{"className":73,"code":74,"language":45},[43],"counter_service/\n├── app/\n│   ├── __init__.py\n│   ├── routes.py\n│   └── counter.py\n├── certs/\n│   ├── generate-self-signed-cert.sh\n│   ├── cert.pem (generated)\n│   └── key.pem (generated)\n├── tests/\n│   ├── __init__.py\n│   └── test_routes.py\n├── config.py\n├── counter_service.py\n├── run_server.sh\n├── run_pytest.sh\n├── requirements.txt\n└── README.md\n",[47,76,74],{"__ignoreMap":13},[78,79,80,106,132,146,152,158,164,170,176],"ul",{},[36,81,82,85,86],{},[47,83,84],{},"app/",": Contains the main application code\n",[78,87,88,94,100],{},[36,89,90,93],{},[47,91,92],{},"__init__.py",": Initializes the Flask application",[36,95,96,99],{},[47,97,98],{},"routes.py",": Defines the application routes",[36,101,102,105],{},[47,103,104],{},"counter.py",": Implements the Counter class for tracking requests",[36,107,108,111,112],{},[47,109,110],{},"certs/",": Contains SSL certificate-related files\n",[78,113,114,120,126],{},[36,115,116,119],{},[47,117,118],{},"generate-self-signed-cert.sh",": Script to generate self-signed SSL certificates",[36,121,122,125],{},[47,123,124],{},"cert.pem",": SSL certificate (generated by the script)",[36,127,128,131],{},[47,129,130],{},"key.pem",": SSL private key (generated by the script)",[36,133,134,137,138],{},[47,135,136],{},"tests/",": Contains test files\n",[78,139,140],{},[36,141,142,145],{},[47,143,144],{},"test_routes.py",": Tests for the application routes",[36,147,148,151],{},[47,149,150],{},"config.py",": Configuration settings for the application",[36,153,154,157],{},[47,155,156],{},"counter_service.py",": Main script to run the Flask application",[36,159,160,163],{},[47,161,162],{},"run_server.sh",": Bash script to run the application with or without SSL",[36,165,166,169],{},[47,167,168],{},"run_pytest.sh",": Bash script to run the application tests",[36,171,172,175],{},[47,173,174],{},"requirements.txt",": List of Python dependencies",[36,177,178,181],{},[47,179,180],{},"README.md",": Project documentation",[28,183,185],{"id":184},"ssl-configuration","SSL Configuration",[15,187,188],{},"SSL configuration is separate from the environment configuration. You can run any environment (development, production, testing) with or without SSL by adding the 'ssl' argument to the script.",[15,190,191,192,195],{},"If running with SSL, the application expects the following files in the ",[47,193,194],{},"certs"," directory:",[78,197,198,203],{},[36,199,200,202],{},[47,201,124],{},": SSL certificate",[36,204,205,207],{},[47,206,130],{},": SSL private key",[15,209,210],{},"To generate self-signed certificates for testing purposes, use the provided script:",[33,212,213,216],{},[36,214,215],{},"Navigate to the project root directory.",[36,217,218,219],{},"Run the following command:\n",[40,220,223],{"className":221,"code":222,"language":45},[43],"(cd certs && ./generate-self-signed-cert.sh)\n",[47,224,222],{"__ignoreMap":13},[15,226,227],{},"This script will generate a self-signed certificate and key with the following details:",[78,229,230,233,236,239,242,245,248],{},[36,231,232],{},"Country: IL",[36,234,235],{},"State: Haifa",[36,237,238],{},"Locality: Haifa",[36,240,241],{},"Organization: DevOzs",[36,243,244],{},"Organizational Unit: DevOps",[36,246,247],{},"Common Name: localhost",[36,249,250,251],{},"Email: ",[18,252,254],{"href":253},"mailto:admin@devozs.com","admin@devozs.com",[15,256,257],{},"The certificate will be valid for 365 days.",[15,259,260],{},"Note: These self-signed certificates should only be used for development and testing purposes. For production environments, always use certificates from a trusted Certificate Authority.",[28,262,264],{"id":263},"running-the-application","Running the Application",[15,266,267,268,270],{},"You can run the application using the ",[47,269,162],{}," script with various configurations:",[33,272,273,292,301,310,319],{},[36,274,275,276,282,285,286],{},"Development mode without SSL (default):",[40,277,280],{"className":278,"code":279,"language":45},[43],"./run_server.sh\n",[47,281,279],{"__ignoreMap":13},[283,284],"br",{},"or",[40,287,290],{"className":288,"code":289,"language":45},[43],"./run_server.sh development\n",[47,291,289],{"__ignoreMap":13},[36,293,294,295],{},"Production mode without SSL:",[40,296,299],{"className":297,"code":298,"language":45},[43],"./run_server.sh production\n",[47,300,298],{"__ignoreMap":13},[36,302,303,304],{},"Testing mode without SSL:",[40,305,308],{"className":306,"code":307,"language":45},[43],"./run_server.sh testing\n",[47,309,307],{"__ignoreMap":13},[36,311,312,313],{},"Development mode with SSL:",[40,314,317],{"className":315,"code":316,"language":45},[43],"./run_server.sh development ssl\n",[47,318,316],{"__ignoreMap":13},[36,320,321,322],{},"Production mode with SSL:",[40,323,326],{"className":324,"code":325,"language":45},[43],"./run_server.sh production ssl\n",[47,327,325],{"__ignoreMap":13},[15,329,330],{},"Note: Running with SSL requires root privileges and will prompt for your password.",[28,332,334],{"id":333},"using-the-api","Using the API",[15,336,337],{},"You can interact with the API using curl commands:",[33,339,340,349],{},[36,341,342,343],{},"To make a GET request and view the current count:",[40,344,347],{"className":345,"code":346,"language":45},[43],"curl http://localhost:5000  # If running without SSL\ncurl -k https://localhost   # If running with SSL\n",[47,348,346],{"__ignoreMap":13},[36,350,351,352],{},"To make a POST request and increment the counter:",[40,353,356],{"className":354,"code":355,"language":45},[43],"curl -X POST http://localhost:5000  # If running without SSL\ncurl -k -X POST https://localhost   # If running with SSL\n",[47,357,355],{"__ignoreMap":13},[15,359,360,361,364],{},"The ",[47,362,363],{},"-k"," flag is used to allow insecure connections when using self-signed certificates.",[15,366,367],{},"You can alternate between these commands to see the counter increment for both GET and POST requests.",[28,369,371],{"id":370},"running-the-tests","Running the tests",[15,373,374],{},"Run the tests using pytest:",[40,376,379],{"className":377,"code":378,"language":45},[43],"pytest tests/\n",[47,380,378],{"__ignoreMap":13},[28,382,384],{"id":383},"configuration","Configuration",[15,386,387],{},"The application uses different configuration classes for different environments:",[78,389,390,396,402],{},[36,391,392,395],{},[47,393,394],{},"DevelopmentConfig",": Used for development.",[36,397,398,401],{},[47,399,400],{},"TestingConfig",": Used for testing.",[36,403,404,407],{},[47,405,406],{},"ProductionConfig",": Used for production.",[15,409,410,411,413],{},"You can modify these configurations in the ",[47,412,150],{}," file.",[28,415,417],{"id":416},"api-endpoints","API Endpoints",[78,419,420,426],{},[36,421,422,425],{},[47,423,424],{},"GET /",": Returns the current count of POST and GET requests",[36,427,428,431],{},[47,429,430],{},"POST /",": Increments the POST counter and returns the updated count",[28,433,435],{"id":434},"running-tests","Running Tests",[15,437,438],{},"To run the tests for the Counter Service application:",[33,440,441,444],{},[36,442,443],{},"Ensure you're in the root directory of the project.",[36,445,446,447],{},"Run the test script:",[40,448,451],{"className":449,"code":450,"language":45},[43],"./run_pytest.sh\n",[47,452,450],{"__ignoreMap":13},[15,454,455],{},"This script will:",[78,457,458,461,464,470],{},[36,459,460],{},"Activate the virtual environment",[36,462,463],{},"Set the FLASK_ENV to 'testing'",[36,465,466,467,469],{},"Run pytest on the tests in the ",[47,468,136],{}," directory",[36,471,472],{},"Deactivate the virtual environment after tests are complete",[15,474,475,476,478],{},"The tests use the ",[47,477,400],{}," configuration, which is designed for testing purposes. This ensures that your tests are run in an environment that mimics your production setup but is safe for testing.",[480,481,483],"h3",{"id":482},"test-configuration","Test Configuration",[15,485,360,486,488,489,491],{},[47,487,400],{}," in ",[47,490,150],{}," is used for running tests. You can modify this configuration to set up any specific settings needed for your test environment. For example:",[40,493,497],{"className":494,"code":495,"language":496,"meta":13,"style":13},"language-python shiki shiki-themes nord github-dark monokai","class TestingConfig(Config):\n    TESTING = True\n    # Add any other test-specific configurations here\n","python",[47,498,499,507,513],{"__ignoreMap":13},[500,501,504],"span",{"class":502,"line":503},"line",1,[500,505,506],{},"class TestingConfig(Config):\n",[500,508,510],{"class":502,"line":509},2,[500,511,512],{},"    TESTING = True\n",[500,514,516],{"class":502,"line":515},3,[500,517,518],{},"    # Add any other test-specific configurations here\n",[480,520,522],{"id":521},"writing-tests","Writing Tests",[15,524,525,526,528,529,531],{},"When writing new tests, ensure they are placed in the ",[47,527,136],{}," directory. The ",[47,530,144],{}," file contains examples of how to write tests for your routes.",[28,533,535],{"id":534},"docker-setup","Docker Setup",[15,537,538],{},"This project includes a Dockerfile for containerizing the Counter Service application. The Docker setup is optimized for running the application on port 5000 without SSL.",[480,540,542],{"id":541},"building-the-docker-image","Building the Docker Image",[15,544,545],{},"To build the Docker image:",[40,547,551],{"className":548,"code":549,"language":550,"meta":13,"style":13},"language-bash shiki shiki-themes nord github-dark monokai","docker build -t counter-service .\n","bash",[47,552,553],{"__ignoreMap":13},[500,554,555,559,563,567,570],{"class":502,"line":503},[500,556,558],{"class":557},"sNHwn","docker",[500,560,562],{"class":561},"siq7d"," build",[500,564,566],{"class":565},"sqTyp"," -t",[500,568,569],{"class":561}," counter-service",[500,571,572],{"class":561}," .\n",[480,574,576],{"id":575},"running-the-application-in-docker","Running the Application in Docker",[15,578,579],{},"You can run the application in different modes using Docker:\nPlease note that the current Docker configuration does not support running the application with SSL on port 443. The application is set up to run on port 5000 without SSL when using Docker.",[33,581,582,628],{},[36,583,584,585,606,285,608],{},"Production mode (default):",[40,586,588],{"className":548,"code":587,"language":550,"meta":13,"style":13},"docker run -p 5000:5000 counter-service\n",[47,589,590],{"__ignoreMap":13},[500,591,592,594,597,600,603],{"class":502,"line":503},[500,593,558],{"class":557},[500,595,596],{"class":561}," run",[500,598,599],{"class":565}," -p",[500,601,602],{"class":561}," 5000:5000",[500,604,605],{"class":561}," counter-service\n",[283,607],{},[40,609,611],{"className":548,"code":610,"language":550,"meta":13,"style":13},"docker run -p 5000:5000 counter-service production\n",[47,612,613],{"__ignoreMap":13},[500,614,615,617,619,621,623,625],{"class":502,"line":503},[500,616,558],{"class":557},[500,618,596],{"class":561},[500,620,599],{"class":565},[500,622,602],{"class":561},[500,624,569],{"class":561},[500,626,627],{"class":561}," production\n",[36,629,630,631],{},"Development mode:",[40,632,634],{"className":548,"code":633,"language":550,"meta":13,"style":13},"docker run -p 5000:5000 counter-service development\n",[47,635,636],{"__ignoreMap":13},[500,637,638,640,642,644,646,648],{"class":502,"line":503},[500,639,558],{"class":557},[500,641,596],{"class":561},[500,643,599],{"class":565},[500,645,602],{"class":561},[500,647,569],{"class":561},[500,649,650],{"class":561}," development\n",[15,652,653,654],{},"The application will be accessible at ",[47,655,656],{},"http://localhost:5000",[28,658,660],{"id":659},"future-enhancements-and-notes","Future Enhancements and Notes",[15,662,663],{},"As we continue to develop and improve this project, we've identified several areas for future enhancements and some important notes:",[480,665,667],{"id":666},"cicd-improvements","CI/CD Improvements",[78,669,670,681,687],{},[36,671,672,676,677,680],{},[673,674,675],"strong",{},"Docker Run in CI",": The ",[47,678,679],{},"run_docker"," step at the end of the CI pipeline is currently included for demonstration purposes only. In a production environment, this step would be unnecessary as the image is already pushed to the registry.",[36,682,683,686],{},[673,684,685],{},"Image Scanning",": Implement image scanning using tools like Trivy or similar to enhance security and identify vulnerabilities in our Docker images.",[36,688,689,692],{},[673,690,691],{},"Merge Request Approvals",": Consider implementing additional merge request approvals and other GitLab approval processes to enhance code quality and security.",[480,694,696],{"id":695},"dockerfile-optimizations","Dockerfile Optimizations",[78,698,699,705,711],{},[36,700,701,704],{},[673,702,703],{},"Single Layer Build",": The current Dockerfile uses a two-layer build for demonstration purposes. In the future, we may optimize this to a single layer for efficiency.",[36,706,707,710],{},[673,708,709],{},"Rootless Docker Build",": Explore using Podman for rootless Docker builds to enhance security.",[36,712,713,716,717,719],{},[673,714,715],{},"Requirement Separation",": Investigate the option to split ",[47,718,174],{}," into separate files for application and testing dependencies.",[15,721,722],{},"These enhancements and notes serve as a roadmap for future development. They reflect our commitment to continuous improvement in terms of efficiency, security, and best practices. We welcome contributions and suggestions in any of these areas.",[724,725,726],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html pre.shiki code .sNHwn, html code.shiki .sNHwn{--shiki-default:#88C0D0;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html pre.shiki code .siq7d, html code.shiki .siq7d{--shiki-default:#A3BE8C;--shiki-dark:#9ECBFF;--shiki-sepia:#E6DB74}html pre.shiki code .sqTyp, html code.shiki .sqTyp{--shiki-default:#A3BE8C;--shiki-dark:#79B8FF;--shiki-sepia:#AE81FF}",{"title":13,"searchDepth":509,"depth":509,"links":728},[729,730,731,732,733,734,735,736,737,741,745],{"id":30,"depth":509,"text":31},{"id":69,"depth":509,"text":70},{"id":184,"depth":509,"text":185},{"id":263,"depth":509,"text":264},{"id":333,"depth":509,"text":334},{"id":370,"depth":509,"text":371},{"id":383,"depth":509,"text":384},{"id":416,"depth":509,"text":417},{"id":434,"depth":509,"text":435,"children":738},[739,740],{"id":482,"depth":515,"text":483},{"id":521,"depth":515,"text":522},{"id":534,"depth":509,"text":535,"children":742},[743,744],{"id":541,"depth":515,"text":542},{"id":575,"depth":515,"text":576},{"id":659,"depth":509,"text":660,"children":746},[747,748],{"id":666,"depth":515,"text":667},{"id":695,"depth":515,"text":696},"./workflow.png","2024-08-06T08:00:00.000Z",false,null,"md","CI, Test, Build, Docker, Python, ECR",{},true,"/blog/2024/08/06/gitlab-docker-python",{"title":5,"description":13},"gitlab-docker-python","blog/2024/08/06/gitlab-docker-python",[762,763,764,765,766,767],"CI","Test","Build","Docker","Python","ECR","ODyYLIDNWHA6KBIYeP58hhDrVrKQ8jL36cQEVfAf1qk",[770],{"id":771,"title":772,"author":6,"body":773,"cover":2747,"date":2748,"description":777,"draft":751,"excerpt":752,"extension":753,"github":784,"keywords":2749,"meta":2750,"navigation":756,"path":2751,"seo":2752,"shortDesc":752,"slug":2753,"stem":2754,"tags":2755,"video":752,"__hash__":2758},"blog/blog/2023/09/09/continuence-integration.md","Continuences Integration",{"type":8,"value":774,"toc":2736},[775,778,786,790,799,816,820,823,826,915,919,922,937,1627,1631,1646,1659,1666,1670,1673,1678,1775,1778,1784,1787,2205,2209,2212,2223,2238,2331,2335,2338,2352,2689,2693,2701,2704,2733],[15,776,777],{},"In the forthcoming blog post, we'll explore the deployment of a Nuxt 3 (Vue 3) application running on a Node.js environment. Our focus will be on setting up a comprehensive CI pipeline, encompassing tasks such as testing, building, Docker containerization, and pushing an image to a container registry.",[11,779,780],{"type":13},[15,781,782],{},[18,783,23],{"href":784,"rel":785},"https://github.com/devozs/blog-frontend",[22],[28,787,789],{"id":788},"guidelines","Guidelines",[15,791,792,793,798],{},"To achieve this, I've used ",[18,794,797],{"href":795,"rel":796},"https://github.com/features/actions",[22],"GitHub Actions"," as the CI workflow. Nevertheless, it's important to highlight that you have the flexibility to opt for different tools according to your requirements, whether it's Jenkins, Gitlab CI, or any other CI solution that aligns with your preferences.",[11,800,802,805],{"type":801},"warning",[15,803,804],{},"Container Registry Prepeartion!",[806,807,808],"template",{"v-slot:details":13},[15,809,810,811],{},"I've chosen to use GitHub Packages as the container registry to store the application image. However, it's essential to note that you have the flexibility to opt for alternative container registries such as Docker Hub, Azure Container Registry, and others if you prefer.",[18,812,815],{"href":813,"rel":814},"https://github.com/features/packages",[22],"More information can be found here",[28,817,819],{"id":818},"dockerfile","Dockerfile",[15,821,822],{},"As previously mentioned, we're working with a Node.js application, which is why we're using the node:17 parent image.",[15,824,825],{},"In the following lines, we'll be copying the necessary files into the container, exposing a container port, and configuring the entry point to run the server.",[40,827,830],{"className":828,"code":829,"language":558,"meta":13,"style":13},"language-docker shiki shiki-themes nord github-dark monokai","FROM node:17-alpine\n\nRUN mkdir -p /usr/src/nuxt-app\nWORKDIR /usr/src/nuxt-app\nCOPY . .\n\nRUN npm ci && npm cache clean --force\nRUN npm run build\n\nENV NUXT_HOST=0.0.0.0\nENV NUXT_PORT=3000\n\nEXPOSE 3000\n\nENTRYPOINT [\"node\", \".output/server/index.mjs\"]\n",[47,831,832,837,842,847,853,859,864,870,876,881,887,893,898,904,909],{"__ignoreMap":13},[500,833,834],{"class":502,"line":503},[500,835,836],{},"FROM node:17-alpine\n",[500,838,839],{"class":502,"line":509},[500,840,841],{"emptyLinePlaceholder":756},"\n",[500,843,844],{"class":502,"line":515},[500,845,846],{},"RUN mkdir -p /usr/src/nuxt-app\n",[500,848,850],{"class":502,"line":849},4,[500,851,852],{},"WORKDIR /usr/src/nuxt-app\n",[500,854,856],{"class":502,"line":855},5,[500,857,858],{},"COPY . .\n",[500,860,862],{"class":502,"line":861},6,[500,863,841],{"emptyLinePlaceholder":756},[500,865,867],{"class":502,"line":866},7,[500,868,869],{},"RUN npm ci && npm cache clean --force\n",[500,871,873],{"class":502,"line":872},8,[500,874,875],{},"RUN npm run build\n",[500,877,879],{"class":502,"line":878},9,[500,880,841],{"emptyLinePlaceholder":756},[500,882,884],{"class":502,"line":883},10,[500,885,886],{},"ENV NUXT_HOST=0.0.0.0\n",[500,888,890],{"class":502,"line":889},11,[500,891,892],{},"ENV NUXT_PORT=3000\n",[500,894,896],{"class":502,"line":895},12,[500,897,841],{"emptyLinePlaceholder":756},[500,899,901],{"class":502,"line":900},13,[500,902,903],{},"EXPOSE 3000\n",[500,905,907],{"class":502,"line":906},14,[500,908,841],{"emptyLinePlaceholder":756},[500,910,912],{"class":502,"line":911},15,[500,913,914],{},"ENTRYPOINT [\"node\", \".output/server/index.mjs\"]\n",[28,916,918],{"id":917},"ci-workflow","CI Workflow",[15,920,921],{},"We are using GitHub Action for the CI pipeline implementation.",[15,923,924,925,931,932],{},"GitHub search workflow yamls under the repository location: ",[926,927,928],"em",{},[673,929,930],{},".github/workflows",".\nWe've created a workflow named ",[926,933,934],{},[673,935,936],{},"buildAndPush.yaml",[11,938,939,942],{"type":47},[15,940,941],{},"Full buildAndPush.yaml",[806,943,944],{"v-slot:details":13},[40,945,949],{"className":946,"code":947,"language":948,"meta":13,"style":13},"language-yaml shiki shiki-themes nord github-dark monokai","name: Blog Frontend - Test, Build and Push\n\non:\n  workflow_dispatch:\n  push:\n    branches:\n      - 'main'\njobs:\n  test:\n    runs-on: ubuntu-latest\n    \n    permissions:\n      contents: read\n      pull-requests: write\n\n    steps:\n    - uses: actions/checkout@v3\n\n    - name: 'Install Node'\n      uses: actions/setup-node@v3\n      with:\n        node-version: '17'\n\n    - name: 'Install Deps'\n      run: |\n        npm install\n        npm run build\n\n    - name: 'Test'\n      run: npx vitest --coverage\n\n    - name: 'Report Coverage'\n      if: always() # Also generate the report if tests are failing\n      uses:  davelosert/vitest-coverage-report-action@v2\n\n  build-push:\n    needs: test\n    env:\n      REGISTRY: ghcr.io/devozs\n      IMAGE: blog-frontend\n    runs-on: ubuntu-latest\n    steps:\n      - name: \"Checkout GitHub Action\"\n        uses: actions/checkout@v3\n\n      - name: Generate build ID\n        id: prep\n        run: |\n            branch=${GITHUB_REF##*/}\n            sha=${GITHUB_SHA::8}\n            ts=$(date +%s)\n            echo \"BUILD_ID=${branch}-${sha}-${ts}\" >> $GITHUB_OUTPUT\n      - name: Set up QEMU\n        uses: docker/setup-qemu-action@v2\n\n      - name: Set up Docker Buildx\n        uses: docker/setup-buildx-action@v2\n\n      - name: \"Build\"\n        run: |\n          docker build -f Dockerfile . -t ${{ env.IMAGE }}:${{ steps.prep.outputs.BUILD_ID }}\n\n      - name: Log in to the Container registry\n        uses: docker/login-action@v2\n        with:\n          registry: ghcr.io\n          username: ${{ github.actor }}\n          password: ${{ secrets.GITHUB_TOKEN }}\n\n      - name: \"Docker Push\"\n        run: |\n          docker tag ${{ env.IMAGE }}:${{ steps.prep.outputs.BUILD_ID }} ${{ env.REGISTRY }}/${{ env.IMAGE }}:${{ steps.prep.outputs.BUILD_ID }}\n          docker push ${{ env.REGISTRY }}/${{ env.IMAGE }}:${{ steps.prep.outputs.BUILD_ID }}\n","yaml",[47,950,951,964,968,977,984,991,998,1013,1020,1027,1037,1043,1050,1060,1070,1074,1082,1096,1101,1118,1129,1137,1152,1157,1173,1185,1191,1197,1202,1217,1227,1232,1248,1263,1273,1278,1286,1297,1305,1316,1327,1336,1343,1361,1371,1376,1388,1399,1409,1415,1421,1427,1433,1445,1455,1460,1472,1482,1487,1502,1511,1517,1522,1534,1544,1552,1563,1574,1585,1590,1606,1615,1621],{"__ignoreMap":13},[500,952,953,957,961],{"class":502,"line":503},[500,954,956],{"class":955},"skFRX","name",[500,958,960],{"class":959},"sUaCP",":",[500,962,963],{"class":561}," Blog Frontend - Test, Build and Push\n",[500,965,966],{"class":502,"line":509},[500,967,841],{"emptyLinePlaceholder":756},[500,969,970,974],{"class":502,"line":515},[500,971,973],{"class":972},"sKfHY","on",[500,975,976],{"class":959},":\n",[500,978,979,982],{"class":502,"line":849},[500,980,981],{"class":955},"  workflow_dispatch",[500,983,976],{"class":959},[500,985,986,989],{"class":502,"line":855},[500,987,988],{"class":955},"  push",[500,990,976],{"class":959},[500,992,993,996],{"class":502,"line":861},[500,994,995],{"class":955},"    branches",[500,997,976],{"class":959},[500,999,1000,1003,1007,1010],{"class":502,"line":866},[500,1001,1002],{"class":959},"      -",[500,1004,1006],{"class":1005},"sQE_P"," '",[500,1008,1009],{"class":561},"main",[500,1011,1012],{"class":1005},"'\n",[500,1014,1015,1018],{"class":502,"line":872},[500,1016,1017],{"class":955},"jobs",[500,1019,976],{"class":959},[500,1021,1022,1025],{"class":502,"line":878},[500,1023,1024],{"class":955},"  test",[500,1026,976],{"class":959},[500,1028,1029,1032,1034],{"class":502,"line":883},[500,1030,1031],{"class":955},"    runs-on",[500,1033,960],{"class":959},[500,1035,1036],{"class":561}," ubuntu-latest\n",[500,1038,1039],{"class":502,"line":889},[500,1040,1042],{"class":1041},"sw3Zv","    \n",[500,1044,1045,1048],{"class":502,"line":895},[500,1046,1047],{"class":955},"    permissions",[500,1049,976],{"class":959},[500,1051,1052,1055,1057],{"class":502,"line":900},[500,1053,1054],{"class":955},"      contents",[500,1056,960],{"class":959},[500,1058,1059],{"class":561}," read\n",[500,1061,1062,1065,1067],{"class":502,"line":906},[500,1063,1064],{"class":955},"      pull-requests",[500,1066,960],{"class":959},[500,1068,1069],{"class":561}," write\n",[500,1071,1072],{"class":502,"line":911},[500,1073,841],{"emptyLinePlaceholder":756},[500,1075,1077,1080],{"class":502,"line":1076},16,[500,1078,1079],{"class":955},"    steps",[500,1081,976],{"class":959},[500,1083,1085,1088,1091,1093],{"class":502,"line":1084},17,[500,1086,1087],{"class":959},"    -",[500,1089,1090],{"class":955}," uses",[500,1092,960],{"class":959},[500,1094,1095],{"class":561}," actions/checkout@v3\n",[500,1097,1099],{"class":502,"line":1098},18,[500,1100,841],{"emptyLinePlaceholder":756},[500,1102,1104,1106,1109,1111,1113,1116],{"class":502,"line":1103},19,[500,1105,1087],{"class":959},[500,1107,1108],{"class":955}," name",[500,1110,960],{"class":959},[500,1112,1006],{"class":1005},[500,1114,1115],{"class":561},"Install Node",[500,1117,1012],{"class":1005},[500,1119,1121,1124,1126],{"class":502,"line":1120},20,[500,1122,1123],{"class":955},"      uses",[500,1125,960],{"class":959},[500,1127,1128],{"class":561}," actions/setup-node@v3\n",[500,1130,1132,1135],{"class":502,"line":1131},21,[500,1133,1134],{"class":955},"      with",[500,1136,976],{"class":959},[500,1138,1140,1143,1145,1147,1150],{"class":502,"line":1139},22,[500,1141,1142],{"class":955},"        node-version",[500,1144,960],{"class":959},[500,1146,1006],{"class":1005},[500,1148,1149],{"class":561},"17",[500,1151,1012],{"class":1005},[500,1153,1155],{"class":502,"line":1154},23,[500,1156,841],{"emptyLinePlaceholder":756},[500,1158,1160,1162,1164,1166,1168,1171],{"class":502,"line":1159},24,[500,1161,1087],{"class":959},[500,1163,1108],{"class":955},[500,1165,960],{"class":959},[500,1167,1006],{"class":1005},[500,1169,1170],{"class":561},"Install Deps",[500,1172,1012],{"class":1005},[500,1174,1176,1179,1181],{"class":502,"line":1175},25,[500,1177,1178],{"class":955},"      run",[500,1180,960],{"class":959},[500,1182,1184],{"class":1183},"s4BcI"," |\n",[500,1186,1188],{"class":502,"line":1187},26,[500,1189,1190],{"class":561},"        npm install\n",[500,1192,1194],{"class":502,"line":1193},27,[500,1195,1196],{"class":561},"        npm run build\n",[500,1198,1200],{"class":502,"line":1199},28,[500,1201,841],{"emptyLinePlaceholder":756},[500,1203,1205,1207,1209,1211,1213,1215],{"class":502,"line":1204},29,[500,1206,1087],{"class":959},[500,1208,1108],{"class":955},[500,1210,960],{"class":959},[500,1212,1006],{"class":1005},[500,1214,763],{"class":561},[500,1216,1012],{"class":1005},[500,1218,1220,1222,1224],{"class":502,"line":1219},30,[500,1221,1178],{"class":955},[500,1223,960],{"class":959},[500,1225,1226],{"class":561}," npx vitest --coverage\n",[500,1228,1230],{"class":502,"line":1229},31,[500,1231,841],{"emptyLinePlaceholder":756},[500,1233,1235,1237,1239,1241,1243,1246],{"class":502,"line":1234},32,[500,1236,1087],{"class":959},[500,1238,1108],{"class":955},[500,1240,960],{"class":959},[500,1242,1006],{"class":1005},[500,1244,1245],{"class":561},"Report Coverage",[500,1247,1012],{"class":1005},[500,1249,1251,1254,1256,1259],{"class":502,"line":1250},33,[500,1252,1253],{"class":955},"      if",[500,1255,960],{"class":959},[500,1257,1258],{"class":561}," always()",[500,1260,1262],{"class":1261},"sr5Cr"," # Also generate the report if tests are failing\n",[500,1264,1266,1268,1270],{"class":502,"line":1265},34,[500,1267,1123],{"class":955},[500,1269,960],{"class":959},[500,1271,1272],{"class":561},"  davelosert/vitest-coverage-report-action@v2\n",[500,1274,1276],{"class":502,"line":1275},35,[500,1277,841],{"emptyLinePlaceholder":756},[500,1279,1281,1284],{"class":502,"line":1280},36,[500,1282,1283],{"class":955},"  build-push",[500,1285,976],{"class":959},[500,1287,1289,1292,1294],{"class":502,"line":1288},37,[500,1290,1291],{"class":955},"    needs",[500,1293,960],{"class":959},[500,1295,1296],{"class":561}," test\n",[500,1298,1300,1303],{"class":502,"line":1299},38,[500,1301,1302],{"class":955},"    env",[500,1304,976],{"class":959},[500,1306,1308,1311,1313],{"class":502,"line":1307},39,[500,1309,1310],{"class":955},"      REGISTRY",[500,1312,960],{"class":959},[500,1314,1315],{"class":561}," ghcr.io/devozs\n",[500,1317,1319,1322,1324],{"class":502,"line":1318},40,[500,1320,1321],{"class":955},"      IMAGE",[500,1323,960],{"class":959},[500,1325,1326],{"class":561}," blog-frontend\n",[500,1328,1330,1332,1334],{"class":502,"line":1329},41,[500,1331,1031],{"class":955},[500,1333,960],{"class":959},[500,1335,1036],{"class":561},[500,1337,1339,1341],{"class":502,"line":1338},42,[500,1340,1079],{"class":955},[500,1342,976],{"class":959},[500,1344,1346,1348,1350,1352,1355,1358],{"class":502,"line":1345},43,[500,1347,1002],{"class":959},[500,1349,1108],{"class":955},[500,1351,960],{"class":959},[500,1353,1354],{"class":1005}," \"",[500,1356,1357],{"class":561},"Checkout GitHub Action",[500,1359,1360],{"class":1005},"\"\n",[500,1362,1364,1367,1369],{"class":502,"line":1363},44,[500,1365,1366],{"class":955},"        uses",[500,1368,960],{"class":959},[500,1370,1095],{"class":561},[500,1372,1374],{"class":502,"line":1373},45,[500,1375,841],{"emptyLinePlaceholder":756},[500,1377,1379,1381,1383,1385],{"class":502,"line":1378},46,[500,1380,1002],{"class":959},[500,1382,1108],{"class":955},[500,1384,960],{"class":959},[500,1386,1387],{"class":561}," Generate build ID\n",[500,1389,1391,1394,1396],{"class":502,"line":1390},47,[500,1392,1393],{"class":955},"        id",[500,1395,960],{"class":959},[500,1397,1398],{"class":561}," prep\n",[500,1400,1402,1405,1407],{"class":502,"line":1401},48,[500,1403,1404],{"class":955},"        run",[500,1406,960],{"class":959},[500,1408,1184],{"class":1183},[500,1410,1412],{"class":502,"line":1411},49,[500,1413,1414],{"class":561},"            branch=${GITHUB_REF##*/}\n",[500,1416,1418],{"class":502,"line":1417},50,[500,1419,1420],{"class":561},"            sha=${GITHUB_SHA::8}\n",[500,1422,1424],{"class":502,"line":1423},51,[500,1425,1426],{"class":561},"            ts=$(date +%s)\n",[500,1428,1430],{"class":502,"line":1429},52,[500,1431,1432],{"class":561},"            echo \"BUILD_ID=${branch}-${sha}-${ts}\" >> $GITHUB_OUTPUT\n",[500,1434,1436,1438,1440,1442],{"class":502,"line":1435},53,[500,1437,1002],{"class":959},[500,1439,1108],{"class":955},[500,1441,960],{"class":959},[500,1443,1444],{"class":561}," Set up QEMU\n",[500,1446,1448,1450,1452],{"class":502,"line":1447},54,[500,1449,1366],{"class":955},[500,1451,960],{"class":959},[500,1453,1454],{"class":561}," docker/setup-qemu-action@v2\n",[500,1456,1458],{"class":502,"line":1457},55,[500,1459,841],{"emptyLinePlaceholder":756},[500,1461,1463,1465,1467,1469],{"class":502,"line":1462},56,[500,1464,1002],{"class":959},[500,1466,1108],{"class":955},[500,1468,960],{"class":959},[500,1470,1471],{"class":561}," Set up Docker Buildx\n",[500,1473,1475,1477,1479],{"class":502,"line":1474},57,[500,1476,1366],{"class":955},[500,1478,960],{"class":959},[500,1480,1481],{"class":561}," docker/setup-buildx-action@v2\n",[500,1483,1485],{"class":502,"line":1484},58,[500,1486,841],{"emptyLinePlaceholder":756},[500,1488,1490,1492,1494,1496,1498,1500],{"class":502,"line":1489},59,[500,1491,1002],{"class":959},[500,1493,1108],{"class":955},[500,1495,960],{"class":959},[500,1497,1354],{"class":1005},[500,1499,764],{"class":561},[500,1501,1360],{"class":1005},[500,1503,1505,1507,1509],{"class":502,"line":1504},60,[500,1506,1404],{"class":955},[500,1508,960],{"class":959},[500,1510,1184],{"class":1183},[500,1512,1514],{"class":502,"line":1513},61,[500,1515,1516],{"class":561},"          docker build -f Dockerfile . -t ${{ env.IMAGE }}:${{ steps.prep.outputs.BUILD_ID }}\n",[500,1518,1520],{"class":502,"line":1519},62,[500,1521,841],{"emptyLinePlaceholder":756},[500,1523,1525,1527,1529,1531],{"class":502,"line":1524},63,[500,1526,1002],{"class":959},[500,1528,1108],{"class":955},[500,1530,960],{"class":959},[500,1532,1533],{"class":561}," Log in to the Container registry\n",[500,1535,1537,1539,1541],{"class":502,"line":1536},64,[500,1538,1366],{"class":955},[500,1540,960],{"class":959},[500,1542,1543],{"class":561}," docker/login-action@v2\n",[500,1545,1547,1550],{"class":502,"line":1546},65,[500,1548,1549],{"class":955},"        with",[500,1551,976],{"class":959},[500,1553,1555,1558,1560],{"class":502,"line":1554},66,[500,1556,1557],{"class":955},"          registry",[500,1559,960],{"class":959},[500,1561,1562],{"class":561}," ghcr.io\n",[500,1564,1566,1569,1571],{"class":502,"line":1565},67,[500,1567,1568],{"class":955},"          username",[500,1570,960],{"class":959},[500,1572,1573],{"class":561}," ${{ github.actor }}\n",[500,1575,1577,1580,1582],{"class":502,"line":1576},68,[500,1578,1579],{"class":955},"          password",[500,1581,960],{"class":959},[500,1583,1584],{"class":561}," ${{ secrets.GITHUB_TOKEN }}\n",[500,1586,1588],{"class":502,"line":1587},69,[500,1589,841],{"emptyLinePlaceholder":756},[500,1591,1593,1595,1597,1599,1601,1604],{"class":502,"line":1592},70,[500,1594,1002],{"class":959},[500,1596,1108],{"class":955},[500,1598,960],{"class":959},[500,1600,1354],{"class":1005},[500,1602,1603],{"class":561},"Docker Push",[500,1605,1360],{"class":1005},[500,1607,1609,1611,1613],{"class":502,"line":1608},71,[500,1610,1404],{"class":955},[500,1612,960],{"class":959},[500,1614,1184],{"class":1183},[500,1616,1618],{"class":502,"line":1617},72,[500,1619,1620],{"class":561},"          docker tag ${{ env.IMAGE }}:${{ steps.prep.outputs.BUILD_ID }} ${{ env.REGISTRY }}/${{ env.IMAGE }}:${{ steps.prep.outputs.BUILD_ID }}\n",[500,1622,1624],{"class":502,"line":1623},73,[500,1625,1626],{"class":561},"          docker push ${{ env.REGISTRY }}/${{ env.IMAGE }}:${{ steps.prep.outputs.BUILD_ID }}\n",[480,1628,1630],{"id":1629},"setup-action","Setup Action",[15,1632,1633,1634,1639,1640,1645],{},"We've breaken our pipline into two main parts (jobs in GitHub Action terminology): ",[926,1635,1636],{},[673,1637,1638],{},"test"," and ",[926,1641,1642],{},[673,1643,1644],{},"build-push",".",[78,1647,1648,1651],{},[36,1649,1650],{},"test: We've implemented simple unit and component tests in this example. These tests are included to demonstrate where and how to place tests before proceeding to the build phase.",[36,1652,1653,1654],{},"build-push: In this phase, we build the container using the Dockerfile described in the previous section and push it to the GitHub registry. This job stars running only after a succesful complition of test phase.\n",[1655,1656],"img",{"alt":1657,"src":1658,"title":1657},"GitHub Action Summary","/images/blog/2023/09/08/github-action-diagram.png",[15,1660,1661,1662],{},"You can view list workflows execution\n",[1655,1663],{"alt":1664,"src":1665,"title":1664},"GitHub Action List","/images/blog/2023/09/08/github-action-list.png",[480,1667,1669],{"id":1668},"unit-compoenent-tests","Unit / Compoenent Tests",[15,1671,1672],{},"Basic testing implementation helps demonstrate a separate phase before triggering the build-push phase. This prevents images from being pushed into the registry in case the tests fail or are invalid.",[11,1674,1675],{"type":801},[15,1676,1677],{},"This is just an example; in a real-case scenario, there should be many more meaningful funtional and non-functional tests!",[40,1679,1681],{"className":946,"code":1680,"language":948,"meta":13,"style":13},"    - name: 'Install Deps'\n      run: |\n        npm install\n        npm run build\n\n    - name: 'Test'\n      run: npx vitest --coverage\n\n    - name: 'Report Coverage'\n      if: always() # Also generate the report if tests are failing\n      uses:  davelosert/vitest-coverage-report-action@v2\n",[47,1682,1683,1697,1705,1709,1713,1717,1731,1739,1743,1757,1767],{"__ignoreMap":13},[500,1684,1685,1687,1689,1691,1693,1695],{"class":502,"line":503},[500,1686,1087],{"class":959},[500,1688,1108],{"class":955},[500,1690,960],{"class":959},[500,1692,1006],{"class":1005},[500,1694,1170],{"class":561},[500,1696,1012],{"class":1005},[500,1698,1699,1701,1703],{"class":502,"line":509},[500,1700,1178],{"class":955},[500,1702,960],{"class":959},[500,1704,1184],{"class":1183},[500,1706,1707],{"class":502,"line":515},[500,1708,1190],{"class":561},[500,1710,1711],{"class":502,"line":849},[500,1712,1196],{"class":561},[500,1714,1715],{"class":502,"line":855},[500,1716,841],{"emptyLinePlaceholder":756},[500,1718,1719,1721,1723,1725,1727,1729],{"class":502,"line":861},[500,1720,1087],{"class":959},[500,1722,1108],{"class":955},[500,1724,960],{"class":959},[500,1726,1006],{"class":1005},[500,1728,763],{"class":561},[500,1730,1012],{"class":1005},[500,1732,1733,1735,1737],{"class":502,"line":866},[500,1734,1178],{"class":955},[500,1736,960],{"class":959},[500,1738,1226],{"class":561},[500,1740,1741],{"class":502,"line":872},[500,1742,841],{"emptyLinePlaceholder":756},[500,1744,1745,1747,1749,1751,1753,1755],{"class":502,"line":878},[500,1746,1087],{"class":959},[500,1748,1108],{"class":955},[500,1750,960],{"class":959},[500,1752,1006],{"class":1005},[500,1754,1245],{"class":561},[500,1756,1012],{"class":1005},[500,1758,1759,1761,1763,1765],{"class":502,"line":883},[500,1760,1253],{"class":955},[500,1762,960],{"class":959},[500,1764,1258],{"class":561},[500,1766,1262],{"class":1261},[500,1768,1769,1771,1773],{"class":502,"line":889},[500,1770,1123],{"class":955},[500,1772,960],{"class":959},[500,1774,1272],{"class":561},[15,1776,1777],{},"Tests results on GitHub Actions:",[15,1779,1780],{},[1655,1781],{"alt":1782,"src":1783,"title":1782},"GitHub Action Tests","/images/blog/2023/09/09/github-actions-tests.png",[15,1785,1786],{},"Running tests locally:",[40,1788,1790],{"className":548,"code":1789,"language":550,"meta":13,"style":13},"npm run coverage\n\n> coverage\n> vitest run --coverage\n\n\n RUN  v0.34.4 /home/devozs/workspace/sandbox/blog-frontend\n      Coverage enabled with v8\n\n ✓ tests/imports.test.ts (2)\n   ✓ import vue components (2)\n     ✓ normal imports as expected\n     ✓ dynamic imports as expected\n\n Test Files  1 passed (1)\n      Tests  2 passed (2)\n   Start at  00:22:38\n   Duration  1.03s (transform 83ms, setup 0ms, collect 21ms, tests 279ms, environment 0ms, prepare 89ms)\n\n % Coverage report from v8\n-------------|---------|----------|---------|---------|-------------------\nFile         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s \n-------------|---------|----------|---------|---------|-------------------\nAll files    |     100 |      100 |     100 |     100 |                   \n InfoBox.vue |     100 |      100 |     100 |     100 |                   \n-------------|---------|----------|---------|---------|-------------------\n\n",[47,1791,1792,1802,1806,1813,1820,1824,1828,1839,1853,1857,1868,1884,1901,1914,1918,1936,1948,1959,2005,2009,2025,2054,2100,2124,2156,2181],{"__ignoreMap":13},[500,1793,1794,1797,1799],{"class":502,"line":503},[500,1795,1796],{"class":557},"npm",[500,1798,596],{"class":561},[500,1800,1801],{"class":561}," coverage\n",[500,1803,1804],{"class":502,"line":509},[500,1805,841],{"emptyLinePlaceholder":756},[500,1807,1808,1811],{"class":502,"line":515},[500,1809,1810],{"class":1183},">",[500,1812,1801],{"class":1041},[500,1814,1815,1817],{"class":502,"line":849},[500,1816,1810],{"class":1183},[500,1818,1819],{"class":1041}," vitest run --coverage\n",[500,1821,1822],{"class":502,"line":855},[500,1823,841],{"emptyLinePlaceholder":756},[500,1825,1826],{"class":502,"line":861},[500,1827,841],{"emptyLinePlaceholder":756},[500,1829,1830,1833,1836],{"class":502,"line":866},[500,1831,1832],{"class":557}," RUN",[500,1834,1835],{"class":561},"  v0.34.4",[500,1837,1838],{"class":561}," /home/devozs/workspace/sandbox/blog-frontend\n",[500,1840,1841,1844,1847,1850],{"class":502,"line":872},[500,1842,1843],{"class":557},"      Coverage",[500,1845,1846],{"class":561}," enabled",[500,1848,1849],{"class":561}," with",[500,1851,1852],{"class":561}," v8\n",[500,1854,1855],{"class":502,"line":878},[500,1856,841],{"emptyLinePlaceholder":756},[500,1858,1859,1862,1865],{"class":502,"line":883},[500,1860,1861],{"class":557}," ✓",[500,1863,1864],{"class":561}," tests/imports.test.ts",[500,1866,1867],{"class":1041}," (2)\n",[500,1869,1870,1873,1876,1879,1882],{"class":502,"line":889},[500,1871,1872],{"class":557},"   ✓",[500,1874,1875],{"class":561}," import",[500,1877,1878],{"class":561}," vue",[500,1880,1881],{"class":561}," components",[500,1883,1867],{"class":1041},[500,1885,1886,1889,1892,1895,1898],{"class":502,"line":895},[500,1887,1888],{"class":557},"     ✓",[500,1890,1891],{"class":561}," normal",[500,1893,1894],{"class":561}," imports",[500,1896,1897],{"class":561}," as",[500,1899,1900],{"class":561}," expected\n",[500,1902,1903,1905,1908,1910,1912],{"class":502,"line":900},[500,1904,1888],{"class":557},[500,1906,1907],{"class":561}," dynamic",[500,1909,1894],{"class":561},[500,1911,1897],{"class":561},[500,1913,1900],{"class":561},[500,1915,1916],{"class":502,"line":906},[500,1917,841],{"emptyLinePlaceholder":756},[500,1919,1920,1923,1926,1930,1933],{"class":502,"line":911},[500,1921,1922],{"class":557}," Test",[500,1924,1925],{"class":561}," Files",[500,1927,1929],{"class":1928},"sX_qU","  1",[500,1931,1932],{"class":561}," passed",[500,1934,1935],{"class":1041}," (1)\n",[500,1937,1938,1941,1944,1946],{"class":502,"line":1076},[500,1939,1940],{"class":557},"      Tests",[500,1942,1943],{"class":1928},"  2",[500,1945,1932],{"class":561},[500,1947,1867],{"class":1041},[500,1949,1950,1953,1956],{"class":502,"line":1084},[500,1951,1952],{"class":557},"   Start",[500,1954,1955],{"class":561}," at",[500,1957,1958],{"class":561},"  00:22:38\n",[500,1960,1961,1964,1967,1970,1973,1976,1979,1982,1985,1988,1991,1994,1996,1999,2002],{"class":502,"line":1098},[500,1962,1963],{"class":557},"   Duration",[500,1965,1966],{"class":561},"  1.03s",[500,1968,1969],{"class":1041}," (transform ",[500,1971,1972],{"class":561},"83ms,",[500,1974,1975],{"class":561}," setup",[500,1977,1978],{"class":561}," 0ms,",[500,1980,1981],{"class":561}," collect",[500,1983,1984],{"class":561}," 21ms,",[500,1986,1987],{"class":561}," tests",[500,1989,1990],{"class":561}," 279ms,",[500,1992,1993],{"class":561}," environment",[500,1995,1978],{"class":561},[500,1997,1998],{"class":561}," prepare",[500,2000,2001],{"class":561}," 89ms",[500,2003,2004],{"class":1041},")\n",[500,2006,2007],{"class":502,"line":1103},[500,2008,841],{"emptyLinePlaceholder":756},[500,2010,2011,2014,2017,2020,2023],{"class":502,"line":1120},[500,2012,2013],{"class":557}," %",[500,2015,2016],{"class":561}," Coverage",[500,2018,2019],{"class":561}," report",[500,2021,2022],{"class":561}," from",[500,2024,1852],{"class":561},[500,2026,2027,2030,2033,2036,2038,2041,2043,2045,2047,2049,2051],{"class":502,"line":1131},[500,2028,2029],{"class":557},"-------------",[500,2031,2032],{"class":1183},"|",[500,2034,2035],{"class":557},"---------",[500,2037,2032],{"class":1183},[500,2039,2040],{"class":557},"----------",[500,2042,2032],{"class":1183},[500,2044,2035],{"class":557},[500,2046,2032],{"class":1183},[500,2048,2035],{"class":557},[500,2050,2032],{"class":1183},[500,2052,2053],{"class":557},"-------------------\n",[500,2055,2056,2059,2062,2064,2067,2070,2072,2075,2077,2079,2082,2084,2086,2089,2091,2094,2097],{"class":502,"line":1139},[500,2057,2058],{"class":557},"File",[500,2060,2061],{"class":1183},"         |",[500,2063,2013],{"class":557},[500,2065,2066],{"class":561}," Stmts",[500,2068,2069],{"class":1183}," |",[500,2071,2013],{"class":557},[500,2073,2074],{"class":561}," Branch",[500,2076,2069],{"class":1183},[500,2078,2013],{"class":557},[500,2080,2081],{"class":561}," Funcs",[500,2083,2069],{"class":1183},[500,2085,2013],{"class":557},[500,2087,2088],{"class":561}," Lines",[500,2090,2069],{"class":1183},[500,2092,2093],{"class":557}," Uncovered",[500,2095,2096],{"class":561}," Line",[500,2098,2099],{"class":1261}," #s \n",[500,2101,2102,2104,2106,2108,2110,2112,2114,2116,2118,2120,2122],{"class":502,"line":1154},[500,2103,2029],{"class":557},[500,2105,2032],{"class":1183},[500,2107,2035],{"class":557},[500,2109,2032],{"class":1183},[500,2111,2040],{"class":557},[500,2113,2032],{"class":1183},[500,2115,2035],{"class":557},[500,2117,2032],{"class":1183},[500,2119,2035],{"class":557},[500,2121,2032],{"class":1183},[500,2123,2053],{"class":557},[500,2125,2126,2129,2132,2135,2138,2140,2143,2145,2147,2149,2151,2153],{"class":502,"line":1159},[500,2127,2128],{"class":557},"All",[500,2130,2131],{"class":561}," files",[500,2133,2134],{"class":1183},"    |",[500,2136,2137],{"class":557},"     100",[500,2139,2069],{"class":1183},[500,2141,2142],{"class":557},"      100",[500,2144,2069],{"class":1183},[500,2146,2137],{"class":557},[500,2148,2069],{"class":1183},[500,2150,2137],{"class":557},[500,2152,2069],{"class":1183},[500,2154,2155],{"class":1041},"                   \n",[500,2157,2158,2161,2163,2165,2167,2169,2171,2173,2175,2177,2179],{"class":502,"line":1175},[500,2159,2160],{"class":557}," InfoBox.vue",[500,2162,2069],{"class":1183},[500,2164,2137],{"class":557},[500,2166,2069],{"class":1183},[500,2168,2142],{"class":557},[500,2170,2069],{"class":1183},[500,2172,2137],{"class":557},[500,2174,2069],{"class":1183},[500,2176,2137],{"class":557},[500,2178,2069],{"class":1183},[500,2180,2155],{"class":1041},[500,2182,2183,2185,2187,2189,2191,2193,2195,2197,2199,2201,2203],{"class":502,"line":1187},[500,2184,2029],{"class":557},[500,2186,2032],{"class":1183},[500,2188,2035],{"class":557},[500,2190,2032],{"class":1183},[500,2192,2040],{"class":557},[500,2194,2032],{"class":1183},[500,2196,2035],{"class":557},[500,2198,2032],{"class":1183},[500,2200,2035],{"class":557},[500,2202,2032],{"class":1183},[500,2204,2053],{"class":557},[480,2206,2208],{"id":2207},"build-docker","Build Docker",[15,2210,2211],{},"We are using the branch name, commit SHA, and timestamp to compose the image tag (we'll use this later as part of the continuous deployment tutorial).",[11,2213,2215,2218],{"type":2214},"error",[15,2216,2217],{},"Don't use your Docker credentials as plain text!",[806,2219,2220],{"v-slot:details":13},[15,2221,2222],{},"Keep the username and passwords as secrets or use another method to ensure they are not visible as plain text in your pipeline (I've used GitHub secrets).",[15,2224,2225,2226,2231,2232,2237],{},"We are building the image using the ",[926,2227,2228],{},[673,2229,2230],{},"docker build"," command against the Dockerfile mentioned above and tagging it with ",[926,2233,2234],{},[673,2235,2236],{},"-t"," using the tagging logic described earlier.",[40,2239,2241],{"className":548,"code":2240,"language":550,"meta":13,"style":13},"      - name: \"Build\"\n        run: |\n          docker build -f Dockerfile . -t ${{ env.IMAGE }}:${{ steps.prep.outputs.BUILD_ID }}\n",[47,2242,2243,2256,2263],{"__ignoreMap":13},[500,2244,2245,2247,2250,2252,2254],{"class":502,"line":503},[500,2246,1002],{"class":557},[500,2248,2249],{"class":561}," name:",[500,2251,1354],{"class":1005},[500,2253,764],{"class":561},[500,2255,1360],{"class":1005},[500,2257,2258,2261],{"class":502,"line":509},[500,2259,2260],{"class":557},"        run:",[500,2262,1184],{"class":1183},[500,2264,2265,2268,2270,2273,2276,2279,2281,2285,2288,2292,2294,2297,2300,2303,2306,2308,2311,2313,2316,2318,2321,2323,2326,2328],{"class":502,"line":515},[500,2266,2267],{"class":557},"          docker",[500,2269,562],{"class":561},[500,2271,2272],{"class":565}," -f",[500,2274,2275],{"class":561}," Dockerfile",[500,2277,2278],{"class":561}," .",[500,2280,566],{"class":565},[500,2282,2284],{"class":2283},"sDxrV"," ${",[500,2286,2287],{"class":1041},"{ ",[500,2289,2291],{"class":2290},"sn_7u","env",[500,2293,1645],{"class":1041},[500,2295,2296],{"class":2290},"IMAGE",[500,2298,2299],{"class":2283}," }",[500,2301,2302],{"class":561},"}:",[500,2304,2305],{"class":2283},"${",[500,2307,2287],{"class":1041},[500,2309,2310],{"class":2290},"steps",[500,2312,1645],{"class":1041},[500,2314,2315],{"class":2290},"prep",[500,2317,1645],{"class":1041},[500,2319,2320],{"class":2290},"outputs",[500,2322,1645],{"class":1041},[500,2324,2325],{"class":2290},"BUILD_ID",[500,2327,2299],{"class":2283},[500,2329,2330],{"class":561},"}\n",[480,2332,2334],{"id":2333},"push-to-registry","Push to Registry",[15,2336,2337],{},"Login is required for GitHub Packages access with write permissions since we are pushing an image to the registry.",[15,2339,2340,2341,2346,2347,1645],{},"Then we use the images created in the previous step, tag them with the GitHub Container Registry prefix and/or the organization (ghcr.io/devozs) using the ",[926,2342,2343],{},[673,2344,2345],{},"docker tag"," command, and finally push them into the registry with ",[926,2348,2349],{},[673,2350,2351],{},"docker push",[40,2353,2355],{"className":548,"code":2354,"language":550,"meta":13,"style":13},"      - name: \"Build\"\n        run: |\n          docker build -f Dockerfile . -t ${{ env.IMAGE }}:${{ steps.prep.outputs.BUILD_ID }}\n\n      - name: Log in to the Container registry\n        uses: docker/login-action@v2\n        with:\n          registry: ghcr.io\n          username: ${{ github.actor }}\n          password: ${{ secrets.GITHUB_TOKEN }}\n\n      - name: \"Docker Push\"\n        run: |\n          docker tag ${{ env.IMAGE }}:${{ steps.prep.outputs.BUILD_ID }} ${{ env.REGISTRY }}/${{ env.IMAGE }}:${{ steps.prep.outputs.BUILD_ID }}\n          docker push ${{ env.REGISTRY }}/${{ env.IMAGE }}:${{ steps.prep.outputs.BUILD_ID }}\n",[47,2356,2357,2369,2375,2425,2429,2453,2460,2465,2472,2493,2514,2518,2530,2536,2632],{"__ignoreMap":13},[500,2358,2359,2361,2363,2365,2367],{"class":502,"line":503},[500,2360,1002],{"class":557},[500,2362,2249],{"class":561},[500,2364,1354],{"class":1005},[500,2366,764],{"class":561},[500,2368,1360],{"class":1005},[500,2370,2371,2373],{"class":502,"line":509},[500,2372,2260],{"class":557},[500,2374,1184],{"class":1183},[500,2376,2377,2379,2381,2383,2385,2387,2389,2391,2393,2395,2397,2399,2401,2403,2405,2407,2409,2411,2413,2415,2417,2419,2421,2423],{"class":502,"line":515},[500,2378,2267],{"class":557},[500,2380,562],{"class":561},[500,2382,2272],{"class":565},[500,2384,2275],{"class":561},[500,2386,2278],{"class":561},[500,2388,566],{"class":565},[500,2390,2284],{"class":2283},[500,2392,2287],{"class":1041},[500,2394,2291],{"class":2290},[500,2396,1645],{"class":1041},[500,2398,2296],{"class":2290},[500,2400,2299],{"class":2283},[500,2402,2302],{"class":561},[500,2404,2305],{"class":2283},[500,2406,2287],{"class":1041},[500,2408,2310],{"class":2290},[500,2410,1645],{"class":1041},[500,2412,2315],{"class":2290},[500,2414,1645],{"class":1041},[500,2416,2320],{"class":2290},[500,2418,1645],{"class":1041},[500,2420,2325],{"class":2290},[500,2422,2299],{"class":2283},[500,2424,2330],{"class":561},[500,2426,2427],{"class":502,"line":849},[500,2428,841],{"emptyLinePlaceholder":756},[500,2430,2431,2433,2435,2438,2441,2444,2447,2450],{"class":502,"line":855},[500,2432,1002],{"class":557},[500,2434,2249],{"class":561},[500,2436,2437],{"class":561}," Log",[500,2439,2440],{"class":561}," in",[500,2442,2443],{"class":561}," to",[500,2445,2446],{"class":561}," the",[500,2448,2449],{"class":561}," Container",[500,2451,2452],{"class":561}," registry\n",[500,2454,2455,2458],{"class":502,"line":861},[500,2456,2457],{"class":557},"        uses:",[500,2459,1543],{"class":561},[500,2461,2462],{"class":502,"line":866},[500,2463,2464],{"class":557},"        with:\n",[500,2466,2467,2470],{"class":502,"line":872},[500,2468,2469],{"class":557},"          registry:",[500,2471,1562],{"class":561},[500,2473,2474,2477,2479,2481,2484,2486,2489,2491],{"class":502,"line":878},[500,2475,2476],{"class":557},"          username:",[500,2478,2284],{"class":2283},[500,2480,2287],{"class":1041},[500,2482,2483],{"class":2290},"github",[500,2485,1645],{"class":1041},[500,2487,2488],{"class":2290},"actor",[500,2490,2299],{"class":2283},[500,2492,2330],{"class":561},[500,2494,2495,2498,2500,2502,2505,2507,2510,2512],{"class":502,"line":883},[500,2496,2497],{"class":557},"          password:",[500,2499,2284],{"class":2283},[500,2501,2287],{"class":1041},[500,2503,2504],{"class":2290},"secrets",[500,2506,1645],{"class":1041},[500,2508,2509],{"class":2290},"GITHUB_TOKEN",[500,2511,2299],{"class":2283},[500,2513,2330],{"class":561},[500,2515,2516],{"class":502,"line":889},[500,2517,841],{"emptyLinePlaceholder":756},[500,2519,2520,2522,2524,2526,2528],{"class":502,"line":895},[500,2521,1002],{"class":557},[500,2523,2249],{"class":561},[500,2525,1354],{"class":1005},[500,2527,1603],{"class":561},[500,2529,1360],{"class":1005},[500,2531,2532,2534],{"class":502,"line":900},[500,2533,2260],{"class":557},[500,2535,1184],{"class":1183},[500,2537,2538,2540,2543,2545,2547,2549,2551,2553,2555,2557,2559,2561,2563,2565,2567,2569,2571,2573,2575,2577,2580,2582,2584,2586,2588,2591,2593,2596,2598,2600,2602,2604,2606,2608,2610,2612,2614,2616,2618,2620,2622,2624,2626,2628,2630],{"class":502,"line":906},[500,2539,2267],{"class":557},[500,2541,2542],{"class":561}," tag",[500,2544,2284],{"class":2283},[500,2546,2287],{"class":1041},[500,2548,2291],{"class":2290},[500,2550,1645],{"class":1041},[500,2552,2296],{"class":2290},[500,2554,2299],{"class":2283},[500,2556,2302],{"class":561},[500,2558,2305],{"class":2283},[500,2560,2287],{"class":1041},[500,2562,2310],{"class":2290},[500,2564,1645],{"class":1041},[500,2566,2315],{"class":2290},[500,2568,1645],{"class":1041},[500,2570,2320],{"class":2290},[500,2572,1645],{"class":1041},[500,2574,2325],{"class":2290},[500,2576,2299],{"class":2283},[500,2578,2579],{"class":561},"}",[500,2581,2284],{"class":2283},[500,2583,2287],{"class":1041},[500,2585,2291],{"class":2290},[500,2587,1645],{"class":1041},[500,2589,2590],{"class":2290},"REGISTRY",[500,2592,2299],{"class":2283},[500,2594,2595],{"class":561},"}/",[500,2597,2305],{"class":2283},[500,2599,2287],{"class":1041},[500,2601,2291],{"class":2290},[500,2603,1645],{"class":1041},[500,2605,2296],{"class":2290},[500,2607,2299],{"class":2283},[500,2609,2302],{"class":561},[500,2611,2305],{"class":2283},[500,2613,2287],{"class":1041},[500,2615,2310],{"class":2290},[500,2617,1645],{"class":1041},[500,2619,2315],{"class":2290},[500,2621,1645],{"class":1041},[500,2623,2320],{"class":2290},[500,2625,1645],{"class":1041},[500,2627,2325],{"class":2290},[500,2629,2299],{"class":2283},[500,2631,2330],{"class":561},[500,2633,2634,2636,2639,2641,2643,2645,2647,2649,2651,2653,2655,2657,2659,2661,2663,2665,2667,2669,2671,2673,2675,2677,2679,2681,2683,2685,2687],{"class":502,"line":911},[500,2635,2267],{"class":557},[500,2637,2638],{"class":561}," push",[500,2640,2284],{"class":2283},[500,2642,2287],{"class":1041},[500,2644,2291],{"class":2290},[500,2646,1645],{"class":1041},[500,2648,2590],{"class":2290},[500,2650,2299],{"class":2283},[500,2652,2595],{"class":561},[500,2654,2305],{"class":2283},[500,2656,2287],{"class":1041},[500,2658,2291],{"class":2290},[500,2660,1645],{"class":1041},[500,2662,2296],{"class":2290},[500,2664,2299],{"class":2283},[500,2666,2302],{"class":561},[500,2668,2305],{"class":2283},[500,2670,2287],{"class":1041},[500,2672,2310],{"class":2290},[500,2674,1645],{"class":1041},[500,2676,2315],{"class":2290},[500,2678,1645],{"class":1041},[500,2680,2320],{"class":2290},[500,2682,1645],{"class":1041},[500,2684,2325],{"class":2290},[500,2686,2299],{"class":2283},[500,2688,2330],{"class":561},[28,2690,2692],{"id":2691},"validation","Validation",[15,2694,2695,2696],{},"Verify that the image exists in GitHub Packages (or any other container registry you are working with) with the relevant tag.\n",[1655,2697],{"alt":2698,"src":2699,"title":2700},"Alt text","/images/blog/2023/09/08/blog-frontend-image.png","blog-frontend image in Github Registry",[15,2702,2703],{},"You can try and pull it, for example:",[40,2705,2707],{"className":548,"code":2706,"language":550,"meta":13,"style":13},"docker pull ghcr.io/\u003CYOUR_ORG>/blog-frontend:main-fc611440-1694297249\n",[47,2708,2709],{"__ignoreMap":13},[500,2710,2711,2713,2716,2719,2722,2725,2728,2730],{"class":502,"line":503},[500,2712,558],{"class":557},[500,2714,2715],{"class":561}," pull",[500,2717,2718],{"class":561}," ghcr.io/",[500,2720,2721],{"class":1183},"\u003C",[500,2723,2724],{"class":561},"YOUR_OR",[500,2726,2727],{"class":1041},"G",[500,2729,1810],{"class":1183},[500,2731,2732],{"class":561},"/blog-frontend:main-fc611440-1694297249\n",[724,2734,2735],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html pre.shiki code .skFRX, html code.shiki .skFRX{--shiki-default:#8FBCBB;--shiki-dark:#85E89D;--shiki-sepia:#F92672}html pre.shiki code .sUaCP, html code.shiki .sUaCP{--shiki-default:#ECEFF4;--shiki-dark:#E1E4E8;--shiki-sepia:#F8F8F2}html pre.shiki code .siq7d, html code.shiki .siq7d{--shiki-default:#A3BE8C;--shiki-dark:#9ECBFF;--shiki-sepia:#E6DB74}html pre.shiki code .sKfHY, html code.shiki .sKfHY{--shiki-default:#81A1C1;--shiki-dark:#79B8FF;--shiki-sepia:#AE81FF}html pre.shiki code .sQE_P, html code.shiki .sQE_P{--shiki-default:#ECEFF4;--shiki-dark:#9ECBFF;--shiki-sepia:#E6DB74}html pre.shiki code .sw3Zv, html code.shiki .sw3Zv{--shiki-default:#D8DEE9FF;--shiki-dark:#E1E4E8;--shiki-sepia:#F8F8F2}html pre.shiki code .s4BcI, html code.shiki .s4BcI{--shiki-default:#81A1C1;--shiki-dark:#F97583;--shiki-sepia:#F92672}html pre.shiki code .sr5Cr, html code.shiki .sr5Cr{--shiki-default:#616E88;--shiki-dark:#6A737D;--shiki-sepia:#88846F}html pre.shiki code .sNHwn, html code.shiki .sNHwn{--shiki-default:#88C0D0;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html pre.shiki code .sX_qU, html code.shiki .sX_qU{--shiki-default:#B48EAD;--shiki-dark:#79B8FF;--shiki-sepia:#AE81FF}html pre.shiki code .sqTyp, html code.shiki .sqTyp{--shiki-default:#A3BE8C;--shiki-dark:#79B8FF;--shiki-sepia:#AE81FF}html pre.shiki code .sDxrV, html code.shiki .sDxrV{--shiki-default:#81A1C1;--shiki-dark:#E1E4E8;--shiki-sepia:#F8F8F2}html pre.shiki code .sn_7u, html code.shiki .sn_7u{--shiki-default:#D8DEE9;--shiki-dark:#E1E4E8;--shiki-sepia:#F8F8F2}",{"title":13,"searchDepth":509,"depth":509,"links":2737},[2738,2739,2740,2746],{"id":788,"depth":509,"text":789},{"id":818,"depth":509,"text":819},{"id":917,"depth":509,"text":918,"children":2741},[2742,2743,2744,2745],{"id":1629,"depth":515,"text":1630},{"id":1668,"depth":515,"text":1669},{"id":2207,"depth":515,"text":2208},{"id":2333,"depth":515,"text":2334},{"id":2691,"depth":509,"text":2692},"./ci.png","2023-09-09T08:00:00.000Z","CI, Test, Build, Docker, ContainerRegistry, GitHub",{"published":756},"/blog/2023/09/09/continuence-integration",{"title":772,"description":777},"continuence-integration","blog/2023/09/09/continuence-integration",[762,763,764,765,2756,2757],"ContainerRegistry","GitHub","1HE64ECi3v6DCK-Wj3K4sX9wpsdTk3MIqfSYBBoP99Q"]