关于在 coding 上构建与部署前端项目的笔记

admin 报建百科 2024-04-24 176 19

前言

嗐，每个月总有那么几天不想上班，起床起半天，只想 “混吃等死”。这大概就是间接性懒惰吧（我可能更多的是习惯性懒惰，间歇性进取）。

另外我最近也一直在想一些事情，关于核心竞争力方面。想着想着到后面突然感觉自己好像没什么拿得出手的竞争力，这个现实可真是 “凄凄惨惨戚戚”。于是为了 “泄愤”，我把抖音删了。。。当然，问题不在这款软件（抖音本身是很成功很成功的一个产品），而是在于我个人。对于我这种自制能力不强的人来说，抖音实在太具有魔性了，刷着刷着大把的时间就没了，思考良久，最终还是采取了这种极端的做法。

下面进入正题吧：关于在 coding 上持续部署 Vue 项目到 Linux 服务器的步骤。

相关文章：使用jenkins持续集成 vue项目实现自动化部署

准备

服务器

关于服务器方面的准备工作：

准备一台服务器，并绑定 SSH密钥，下载该服务器对应的私钥，文件命名为 test_rsa。
将 test_rsa 放到 .ssh 目录下。

下面我们先测试一下是否可以进入服务器（因为服务器绑定了密钥，所以后续只能通过私钥来进行登录）。

打开终端：

ssh -i ~/.ssh/test_rsa root@x.x.x.x

如果能成功进入，则表示当前的配置都已经成功了。

必要的准备：

安装 nginx（可参考：Nginx基础知识入门，从零到一的实践）。
添加项目目录。
```
cd /opt
mkdir test
```
配置 nginx。

进入 nginx 配置文件的目录，并新建文件 test.d。
```
cd /etc/nginx/conf.d
vi test.d
```
输入以下内容并保存（这里的端口号可以根据服务器的情况自行设置）。
```
server {
  listen 8080;
  root /opt/test/dist;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}
```
启动 nginx（即可）。
```
nginx
```
之前已经启动过的，则重启 nginx。
```
nginx -s reload
```

coding上的准备

在 coding 上新建一个 vue 的项目。
进入 coding 的项目设置，项目设置 -> 开发者选项 -> 凭据管理 -> 新建凭据。
填写新建凭据的相关内容：选择类别：SSH 私钥；名称：test；SSH 私钥：将刚刚下载的私钥的内容，复制到对文本框中。

新建成功后，可以在凭据管理列表下看到刚刚新建的凭据，以及对应的一些基本信息：凭据名称、类型、凭据ID等。
点击 构建与部署，新建构建计划，选择 使用静态配置的 Jenkinsfile。
进行流程配置（这里可以先跳过，最后我们再来进行配置）。
将触发规则设置为 代码更新时自动执行。

静态配置的 Jenkinsfile

打开刚刚新建的构建计划，进入流程配置下的文本编辑器，将以下内容拷贝进去。

pipeline {
  agent any
  stages {
    stage('检出') {
      steps {
        checkout([$class: 'GitSCM', branches: [[name: env.GIT_BUILD_REF]], userRemoteConfigs: [[url: env.GIT_REPO_URL, credentialsId: env.CREDENTIALS_ID]]])
      }
    }

    stage('构建') {
      steps {
        echo '构建中...'
        sh 'npm install --registry=https://registry.npm.taobao.org --cache=$HOME/.npm/.cache/cnpm --disturl=https://npm.taobao.org/dist --userconfig=$HOME/.cnpmrc'
        // 打包命令自定义
        sh 'npm run build:dev'
        echo '构建完成'
      }
    }

    stage('部署') {
      steps {
        echo '部署中...'
        script {
          def remote = [:]
          // 服务器名称
          remote.name = 'name'
          // 服务器的公网IP地址
          remote.host = ''
          remote.allowAnyHosts = true
          remote.fileTransfer = 'scp'
          // 用户名
          remote.user = 'root'
          withCredentials(bindings: [sshUserPrivateKey(
            credentialsId: '凭据 ID', // 这里的 ID 就是刚刚新建的凭据的 ID
            keyFileVariable: 'test_rsa'
          )]) {
            remote.identityFile = test_rsa

            sshPut remote: remote, from: 'dist', into: '/opt/test/'
          }
        }

        echo '部署完成'
      }
    }

  }
}

这里需要注意的是，coding 集成的 jenkins里需要安装 ssh 的插件，上面的发布过程才能生效哦（不然最后一步会报错说 sshPut 不存在）~

最后点击保存修改。修改个代码并推送到仓库，构建完成后，访问项目地址（IP + 端口）, 页面成功打开，大功告成~

总结

本文整理的只是一个极简的部署过程，作为开发环境部署倒也够用了。

欢迎大佬们评论区提建议哦，如果能给个 “赞” 那就再好不过啦~

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!