diff --git a/app/assets/javascripts/environments/components/deployment.vue b/app/assets/javascripts/environments/components/deployment.vue
index 595ae5cb409011974bed6a97985cbc36978688a7..71658544382baa675b722138a86d08b9ce378db4 100644
--- a/app/assets/javascripts/environments/components/deployment.vue
+++ b/app/assets/javascripts/environments/components/deployment.vue
@@ -47,6 +47,9 @@ export default {
     commit() {
       return this.deployment?.commit;
     },
+    commitPath() {
+      return this.commit?.commitPath;
+    },
     user() {
       return this.deployment?.user;
     },
@@ -147,7 +150,9 @@ export default {
             class="gl-font-monospace gl-display-flex gl-align-items-center"
           >
             <gl-icon ref="deployment-commit-icon" name="commit" class="gl-mr-2" />
-            <span v-gl-tooltip :title="$options.i18n.commitSha">{{ shortSha }}</span>
+            <gl-link v-gl-tooltip :title="$options.i18n.commitSha" :href="commitPath">
+              {{ shortSha }}
+            </gl-link>
             <clipboard-button
               :text="shortSha"
               category="tertiary"
diff --git a/spec/frontend/environments/deployment_spec.js b/spec/frontend/environments/deployment_spec.js
index dff3d9ce285342378d9630b1bb66520a20165675..a825c5bedb559d7ef38b07b4c912850f1fdba3dd 100644
--- a/spec/frontend/environments/deployment_spec.js
+++ b/spec/frontend/environments/deployment_spec.js
@@ -101,10 +101,11 @@ describe('~/environments/components/deployment.vue', () => {
       });
 
       it('shows the short SHA for the commit of the deployment', () => {
-        const sha = wrapper.findByTitle(__('Commit SHA'));
+        const sha = wrapper.findByRole('link', { name: __('Commit SHA') });
 
         expect(sha.exists()).toBe(true);
         expect(sha.text()).toBe(deployment.commit.shortId);
+        expect(sha.attributes('href')).toBe(deployment.commit.commitPath);
       });
 
       it('shows the commit icon', () => {