preface

From Tomcat to Github Page to Nginx. Technology has changed, but the obsession with building personal sites has not.

With you!

Purchase an ECS server

First go to a cloud to buy ECS server, buy a month first.

Installing the SSH Tool

Download and install X-Shell6

Connect to the server with Xshell, restart the server before connecting (please reset the password if you forget it)

Ps: If you use Aliyun, you can directly manage the terminal online.

Install the Web container: nginx

  • Install nginx
# yum install nginx

# yum remove nginx
Copy the code
  • Check the version
# nginx -v
Copy the code
  • Check the configuration
# nginx -t
# cd /etc/nginx
# ls
Copy the code

Configure nginx. Conf

Install the Vim editor, edit the nginx configuration, and create a test project

  • Install vim
# yum install vim
Copy the code
  • Edit the config
# vim nginx.conf
Copy the code

 You can edit the configuration file after the insert appears at the bottom of the editor;
Copy the code
  • Edit location (this is the default location for static resource files)

    After editing, enter in sequence

Esc // Exit editing mode :wq // Save the configuration and exit nginx -t to check whether an error occurs in the configuration fileCopy the code

  • Create a project
cd /root
mkdir www
cdWWW vim index.html // Create the index.html fileCopy the code

(Also remember, save and exit after esc :wq)

Start the nginx

# nginx 
Copy the code

403? Don’t panic => Configure a cloud security group – Security group rules (default port 80, rough ICMP enabled)

  • Maybe you need to fix 403 Forbidden in Nginx

By solving this problem, you can be more familiar with vim to write nginx.conf and save exit, Linux check port occupation, kill process, security group entry, etc

Install Jenkins

yum install java yum install git wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo rpm  --import https://jenkins-ci.org/redhat/jenkins-ci.org.key yum install jenkinsCopy the code

Error key not found? Try the following command (if the machine is slow, look for other images)

wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins.io/redhat/jenkins.repo
rpm --import http://pkg.jenkins.io/redhat/jenkins.io.key
yum install jenkins
Copy the code

You are likely to encounter the following problems:

Configuring Java Paths

Viewing the Java Path

  • Jenkins modify permissions
vim /etc/sysconfig/jenkins // $JENKINS_USERChange to "root" : chown -r root:root /var/lib/jenkins chown -r root:root /var/cache/jenkins chown -r root:root /var/log/ Jenkins service Jenkins restartCopy the code

Then you can access Jenkins on port 8080

Vim/var/lib/Jenkins/secrets/initialAdminPassword / / view the passwordCopy the code

Then one dragon installation

Deployment project

  • This is the VUE project

Description:

  1. New Jenkins project and setup, the important points are installing node environment, git address configuration, shell command input (i.e. the operation sequence that you need Jenkins to help you perform).
  2. After exporting the directory, find your nginx.conf file on the Linux server, change the root directory pointing and port Settings, and set the cloud server access rules (to ensure access)
  3. Finally, modify Git, build it, and see the results!
  • Reference: My execution shell

1

node -v
npm install -g yarn --registry=https://registry.npm.taobao.org
yarn  -v
yarn install

yarn lint
yarn build
Copy the code

2

rm -rf test.tar.gz
tar czvf test.tar.gz *
mv -f test.tar.gz /root/www
cd /root/www
tar -xzvf test.tar.gz
rm -rf test.tar.gz
Copy the code

Stage summary

  1. Nginx is a Web services container, analogous to tomcat, which was used before.
  2. Jenkins is an automated build tool, the simplest of which is to help you perform NPM install, NPM run build, etc.
  3. Get familiar with the Linux operation gradually, such as vim/rm/:wq, mysql/nginx/ Jenkins restart operation, as well as view directory, view port, stop port……
  4. In the face of problems, we should have ideas to solve them. Seek method to solve by oneself next, major problem can be solved through search engine, a bit more patient, a bit more careful.
  5. Commit your code to Git (like github), then go to Jenkins, click Build, and you’re done.

Nginx multi-server support

Let’s look at the nginx.conf configuration and copy a server

There should be packaged Vue items in the corresponding directory (you can manually package and upload Git, or configure the corresponding Jenkins project shell command to package). Here I have vuecli3 project and vuepress project. Understand vuepress

  • server1
  • server2

More and more

Looking forward to exchange and sharing about the construction of the site.

Reference:

  • Jenkins + Nginx build the front-end build environment
  • Vue Automated deployment Jenkins