preface

Listen, there are always days every month when I don’t want to go to work and get up half the day just to “eat and wait to die”. This is probably indirect laziness (I’m probably more habitually lazy and intermittently aggressive).

In addition, I have been thinking about some things recently, regarding the core competitiveness. It is a sad reality to think that I suddenly feel like I have no competitive power. So to “vent my anger”, I deleted Douyin… Of course, the problem is not with the app (Douyin itself is a very successful product), but with me. For me, who is not strong in self-control, Douyin is so demonic that I lost a lot of time after brushing. After thinking for a long time, I finally took this extreme measure.

Let’s get down to business: Steps for continuous deployment of Vue projects to Linux servers on coding.

Related article: Automated deployment with Jenkins Continuous Integration VUE project

To prepare

The server

Preparations for the server:

  1. Prepare a server and bind itSSH keyTo download the private key corresponding to the servertest_rsa.
  2. willtest_rsaIn the.sshDirectory.

Let’s first test whether we can access the server (since the server is bound with a key, we can only log in with the private key later).

Open terminal:

ssh -i ~/.ssh/test_rsa [email protected]
Copy the code

If the login succeeds, the current configuration is successful.

Necessary preparation:

  1. Install Nginx (see the basics of Nginx, Zero-to-one Practice).

  2. Add the project directory.

    cd /opt
mkdir test
Copy the code

  3. Configure nginx.

    Go to the directory for the nginx configuration file and create the test.d file.

    cd /etc/nginx/conf.d
vi test.d
Copy the code

    Enter the following and save (the port number here can be set for your server).

    server { listen 8080; root /opt/test/dist; index index.html; location / { try_files $uri $uri/ /index.html; }}Copy the code

    Start nginx.

    nginx
Copy the code

    If nginx has been started before, restart nginx.

    nginx -s reload
Copy the code

Preparation on coding

  1. Create a new vUE project on coding.

  2. Go to Project Settings for Coding, project Settings > Developer Options > Credential Management > New Credential.

  3. Set the following parameters for creating a credential: Type: SSH private key. Name: test; SSH Private key: Copy the content of the downloaded private key to the text box.

    After the credential is created successfully, you can view the newly created credential and its basic information, such as the credential name, type, and credential ID, in the credential Management list.

  4. Click Build and Deploy, create a new build plan, and select Jenkinsfile with static configuration.

  5. Configure the process (this can be skipped and we will configure it at the end).

  6. Set trigger rules to automatically execute when code updates.

Jenkinsfile for static configuration

Open the newly created build plan, go to the text editor under the process configuration, and copy the following into it.

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

    stage('build') {
      steps {
        echo 'Under construction... '
        sh 'npm install --registry=https://registry.npm.taobao.org --cache=$HOME/.npm/.cache/cnpm --disturl=https://npm.taobao.org/dist --userconfig=$HOME/.cnpmrc'
        // The package command is customized
        sh 'npm run build:dev'
        echo 'Build complete'}}stage('deployment') {
      steps {
        echo 'Deployment... '
        script {
          def remote = [:]
          // Server name
          remote.name = 'name'
          // Public IP address of the server
          remote.host = ' '
          remote.allowAnyHosts = true
          remote.fileTransfer = 'scp'
          / / user name
          remote.user = 'root'
          withCredentials(bindings: [sshUserPrivateKey(
            credentialsId: 'the credential ID'.// The ID here is the ID of the newly created credential
            keyFileVariable: 'test_rsa'
          )]) {
            remote.identityFile = test_rsa

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

        echo 'Deployment complete'}}}}Copy the code

Jenkins: sshPut does not exist. Jenkins: sshPut does not exist. SshPut does not exist

Finally, click Save. Modify the code and push it to the warehouse, after the completion of construction, visit the project address (IP + port), the page is opened successfully, complete ~

conclusion

This article summarizes only a minimal deployment process, as a development environment deployment is also enough.

You are welcome to make suggestions in the comments section, and it would be nice if you could give a “like”