preface

When I opened the search engine and typed in “Copy attacking city lion”, I found that the latest record was in April last year, which meant that I had not summarized my growth for another year. Accustomed to the days of “boiling frogs in warm water”, both the experience level and salary income, has been far behind the partners at the same time. Since the beginning of this year, I have been working in the cloud at home, but I have been troubled by various packaging and release requirements. Due to various reasons, small workshops model development team managed code with SVN, still unable to change is weak, we separated before and after the project is complete, the front-end with everyone Vue, before is beautiful good sister with company testing packaging dedicated computers themselves pure manual, packaging, pure manual static catalogue published to the server, Then test it by hand. Later, the arduous task of packaging fell to the front end, repeated steps made people feel tired: local computer new directory pull SVN code –> install NPM dependency –> package different environment –> upload server static directory, simple and tedious work, coupled with EasyConnect to connect the company Intranet slow to despair. Finally, the back end can not look down, proposed to give me the idea of docker, unfortunately, I front-end side did not use docker to deploy, just a folder to the nginx static file server on the line; The back end asked me for packing orders and things like that, and then nothing. Given the docker and Jenkins one-click release for back-end deployments, I figured the Jenkins one-click release would be possible for the front-end as well. Just leave Jenkins to do the NPM command I manually typed locally? Just do it! No operation and maintenance we roll up our sleeves is dry! Have written improper place request everybody many correct!

Docker installation Jenkins

Although the company machine has already deployed Jenkins with Docker, in order to learn the attitude, I use my beggar version of Ali cloud ECS to operate again, although I do not understand the original, called “Copy lion” is not cover, a Copy operation, no problem port 8080 up a Jenkins service. I won’t expand on the content of Docker here, because I don’t know how to do it either. Specifically, you can pay attention to the hot Docker tutorial in the following picture. It takes a cup of tea. Then I will install Jenkins directly here. For more detailed installation documents, please go to install Jenkins. That’s three easy steps on my end, three lines of command and one Jenkins every minute.

  • Pull Jenkins mirror image

    docker pull jenkins/jenkins
Copy the code

  • Create a folder for disk mounting

    mkdir  /home/jenkins
Copy the code

  • Start the service

    docker run -itd --name jenkins -p 8080:8080 -p 50000:50000   --privileged=true -v   /home/jenkins:/var/jenkins jenkins/jenkins
Copy the code

A rare one, no rollover no bug. B: open the password will be prompted for the first time in/var/jenkins_home/secrets/initialAdminPassword, of course, there is no this file on the server, need into the docker container. You can also view it directly from the installation log: Docker logs Jenkins. docker ps -a docker exec -it jenkins /bin/bash cat /var/jenkins_home/secrets/initialAdminPassword

Boon boon, got the password, hurriedly Copy past try! O98K, waiting for a sip of tea, password confirmed, we are on the initialization page

Jenkins initiated the rollover

As I clicked on the Install TAB and waited expectantly for the initialization to complete, the minutes ticked by and I began to feel anxious and a sense of foreboding as I watched the screen full of red crosses and the progress bar that didn’t move or move. Ten minutes passed, twenty minutes passed, thirty minutes passed…… Jenkins is stuck Getting Started huh, must have hit a wall!

jenkins
jenkins
Permission denied
/var/jenkins_home/secrets/initialAdminPassword
/var/jenkins_home/
/var/jenkins_home/updates/default.json
jenkins
docker
vi
vim

Docker cp copy the file to the /home/jenkins directory and check the default. Json configuration. The next goal is to change the connectionCheckUrl field to an in-wall address.

docker cp jenkins:/var/jenkins_home/updates/default.json /home/jenkins/
vi /home/jenkins/default.json
Copy the code

vi
vim
Direct replication does not take effect
jenkins
default.json
jenkins
/tmp
/var/jenkins_home/updates/ 

docker cp /home/jenkins/default.json jenkins:/tmp/
docker exec -u root -it jenkins /bin/bash
mv /var/jenkins_home/updates/default.json /var/jenkins_home/updates/default.json.bak 
mv /tmp/default.json /var/jenkins_home/updates/default.json
exit
Copy the code
docker cp jenkins:/var/jenkins_home/updates/default.json  /home/jenkins/default.json.bak
vi /home/jenkins/default.json.bak
Copy the code

After modifying the configuration, restart it. If it is normal, you can enter the account registration page. If it still shows a lot of red crosses, there should be an option to skip to the left of the lower right retry. After centuries, the plugins are finally installed, and the novice is on his way!

Vue project preview

In order to restore our simple and tedious packaging scenario, I created a new SVN project on the code cloud (not the lucky one) and initialized some simple configurations, such as differentiating the environment and adding time annotations to the packaging files. About Vue project configuration or Webpack configuration can go to the Vue CLI official documentation, Webpack configuration is recommended to take you to unlock the depth of webpack series. Vuedemo Project address: SVN ://gitee.com/hu-qi/vue-demo

  • The.env file distinguishes environment variables

    .env                # loaded in all environments, developed by default
.env.test           Only loaded in test mode
.env.prod           Only loaded in production mode
Copy the code

  • Package. json differentiates running/packaging environments by defining different specifications.

    "serve": "vue-cli-service serve --mode development"."serve:test": "vue-cli-service serve --mode test"."serve:prod": "vue-cli-service serve --mode prod"."dev": "vue-cli-service build --mode development"."build": "vue-cli-service build --mode prod"."test": "vue-cli-service build --mode test".Copy the code

  • Vue.config. js simply configures the webpack input directory and adds custom time annotations to the header of each chunk file through BannerPlugin to distinguish whether it is the latest release.

    const webpack = require('webpack');
module.exports = {
    publicPath: '/',
    outputDir: process.env.outputDir,
    configureWebpack: {
        plugins: [
            new webpack.BannerPlugin(new Date().toLocaleString())
        ]
    }
};
Copy the code

  • Environment configuration parameters set by process.env

    
 <template>
     <div class="hello">
         <h1>{{ msg }} - {{ title }}</h1>
         <h2>API: {{ apiUrl }}</h2>
     </div>
 </template>

 // ...
 <script>
 export default {
   name: 'HelloWorld',
   props: {
     msg: String
   },
   data() {
     return {
       title: ' ',
       apiUrl: ' '}},created() {
     this.title = process.env.VUE_APP_TITLE
     this.apiUrl = process.env.VUE_APP_URL
   }
 }
 </script>
Copy the code

  • The run preview can achieve the desired effect through the run instructions defined in package.json.

  • The package preview uses the package defined in package.json to export the dev, test, and prod folders respectively, and the time comments in the file are as expected.

  • Publish to Nginx here I still install nginx through Docker, and upload the packaged folder to the static directory of nginx for publishing. Here docker install nginx I also just a simple installation practice:

    Docker pull nginx // Pull nginx docker run-d--name nginxtest -p 80:80 nginxtestVerify the configuration mkdir -p/home/nginx / {conf, HTML, logs} / / host configuration folder docker cp nginxtest: new/etc/nginx/nginx. Conf / home/nginx/conf/nginx. Conf / / copy the configuration file docker stop nginxtest / / stop nginxtest docker rm nginxtest / / delete nginxtest docker run  --name nginx-d -p 80:80 -v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /home/nginx/logs:/var/log/ nginx - v/home/nginx/HTML: / usr/share/nginx/HTML nginx / / run formally nginx and mounted to the hostCopy the code

    Simply drop the packaged file into the host’s /home/nginx/html file and it will be accessible. I uploaded the prod folder here, so it can be accessed through ***/prod.

Jenkins packaged the Vue project

Review the steps to test the manual package distribution: pull the code from SVN –> install the NPM install dependency package –> NPM run build package prod–> upload prod to the server nginx static directory (including backing up the previous version). Through learning and practice, by installing some plugins for Jenkins, we were able to easily pull the code, install NodeJS, connect to the server and execute the shell, build the flow and just click the button, and leave it all to Jenkins without the test sister asking me to pack it.

  • The plugins I installed according to our packaging requirements mainly include Subversion plug-in, Publish Over SSH and nodeJS Plugin. Plug-in installation in System Administration -> Plug-in Management -> Optional plug-ins. Search for plug-ins to install.

    nodejsInstallation in System Administration – Global Tools Configuration –NodeJSThis option is not available by defaultNodeJS PluginHere I have installed the default version of Node, usually based on the actual situation, and also set the imagecnpm –registry=https://registry.npm.taobao.org

  • Publish over SSH setup We installed the Publish over SSH plugin, go to System Administration > System Settings to find the corresponding location, here to configure the server we want to deploy. The next step is to package and publish on the deployed server by executing a shell script.

  • If you’re lucky enough to be struggling with packing, you and I must have some simple RM-rf, mv, tar commands in your head. My new project is called vueDemo\-prod. Choose project > Configuration to enter project Configuration. First, I configured General to discard old builds, keep the build days at 3, and keep the maximum of 10 builds; And then source control I choose to pull the code from SVN.

    We then build the environment using the node we installed earlier for the packaging of the following steps.

    So we have the environment, and then we have the build, and here we choose executeshell, the command is mainly consistent with the packaging command of the front-end project configuration, and then compressed, and then uploaded.

    The final post-build operation is to connect to the publisher, as alwaysshellCommands are used to upload, back up, and decompress files. Make sure the packaged folder is finally published to /home/nginx/html.

    Basically a set down, no big problem. Save the app and hit Build Now. Time for a cup of tea and wait for Jenkins to build successfully!

About debugging

Often the road ahead is not always smooth, through the above figure can be seen that even if the construction is successful, I also stepped on a lot of holes. With logs from previous build failures, problems can be clearly identified and resolved, and the whole process is easy to debug. You can see the specific code in the workspace of the project’s home panel. Click on a build history and view the console output to see the specific reason for each build failure. I also encountered a number of issues, including node installation failures, non-standard time, and some shell commands that failed to write properly causing builds to fail. There was even a problem with The Docker Restart Jenkins still being unavailable. Failure is not terrible, terrible is not willing to try again after failure!

The end of the

During this period of “cloud office” at home, I had many opportunities to write this practice record article, but I was too lazy and repeatedly hit a wall in the process of practice. However, finally, it is my honor to produce this article on hydrology, and I look forward to your criticism and correction in the comment area!