Building CI/CD for Autowini's Frontend on Bitbucket, Part 2

At Autowini, most of our frontend projects are now separated out and run on React.

Projects such as web-www-front, web-mobile-front, web-mobile-search, and web-admin-front are built and deployed automatically through Bitbucket Pipelines.

Part 1 covered how I built the pipeline. This Part 2 covers how I automated notifications that share deploy success and failure results with teammates in real time, which made our operations more efficient.

Why did we need deploy notifications?

The existing pipeline was automated, but the way we checked the results had limits.

• Scattered information: To check a deploy result, we had to open the Bitbucket Pipeline page directly every time.
• Delayed sharing: With several projects running in parallel, it was hard for teammates to know right away "who deployed what, and whether it succeeded."
• Response speed: When a deploy failed, the later we noticed, the longer it took to respond to the service outage.

To solve this without building a separate system, I decided to extend the after-script stage of the existing pipeline to send notifications to Naver Works, the collaboration tool we use at work.

Building notifications with a Naver Works Bot

1. Create and activate a Naver Works Bot

First, I created a bot in the Naver Works developer console to send the notifications.

• Create the bot: A bot just for the frontend, so its role is clear
• Set permissions: Activate the bot from the admin menu and give it permission to send messages
• Get the channel: Find the Channel ID of the dedicated chat room that receives the notifications

2. Authentication and message sending logic (Python)

The after-script in Bitbucket Pipelines runs whether the pipeline succeeds or fails. At that point, I check $BITBUCKET_EXIT_CODE and send a message for each status.

Core logic flow:

1. Create a JWT: Generate a JWT auth token from the Service Account details
2. Get an Access Token: Use the issued JWT to get access to the Naver Works API
3. Send the message: Send an easy-to-read notification as a carousel message

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15# Example message data
message_data = {
    "content": {
        "type": "carousel",
        "columns": [{
            "originalContentUrl": img_url, # success/failure image
            "title": f"{status} {repo_name} - {branch_name}",
            "text": commit_title[:60],
            "actions": [
                { "type": "uri", "label": "💬 Commit", "uri": commit_url },
                { "type": "uri", "label": "🚀 Pipeline", "uri": pipeline_url }
            ]
        }]
    }
}

3. Managing Repository Variables

Sensitive information (API keys, private keys, and so on) is registered in Bitbucket's Repository Variables so it is not exposed in the source code.

3. An issue I ran into during implementation

⚠️ Naver Works Console copy button bug

During the integration, I kept getting 401 Unauthorized errors. The cause was somewhere I did not expect.

• Problem: When I copied the Client ID with the 'copy button' in the Naver Works console, part of the string was missing.
• Fix: Instead of using the button, I selected the whole string by dragging with the mouse and copied it, and when I registered that value, it worked normally.

4. Results and expected benefits

With real-time deploy notifications in place, we can now share the deploy status of every frontend project in real time. We no longer have to check the pipeline page one by one each time, and we can respond right away when a deploy fails. Most of all, I feel proud that developers who join us later will be able to see the deploy status at a glance and work much more comfortably.