Construction and deployment of personal website

Construction and deployment of personal website

This is my 个人网站地址 AquaMriusC Home , welcome to visit.

The construction and deployment of a personal website requires the following steps:

1. The personal website project has been developed

The back end of my website is developed with SpringBoot technology, the front end is developed with Vue technology, and the front and back end projects are separated.

Backend project:

Front-end project:

2. Package the developed project

Note: Before packaging the project, you must make sure that the configurations of the project are correct, because the required configurations are different when the project runs on the local tomcat server and on the remote cloud server.

2.1 Backend project packaging

If the target directory cannot be found after packaging, you can set it as follows

2.2 Front-end project packaging

Before the vue project is packaged, it needs to be configured, inview.config.jsAdd the following content under the file:

//vue打包配置
//配置公共路径(必须的)
publicPath: './',
//打包到哪个文件夹
outputDir: 'dist',
//将静态资源打包
assetsDir: 'static',
//打包的时候是否取消eslint代码检查
lintOnSave: true,
//去除打包后js的map文件
productionSourceMap: true,
//去除console
configureWebpack: {
    
    
    //关闭警告
    performance: {
    
    
         hints: 'warning',
         //入口起点的最大体积
         maxEntrypointSize: 50000000,
         //生成文件的最大体积
         maxAssetSize: 30000000,
    }
}

After the configuration is complete, start packaging:

3. Deploy and launch the packaged project

The prerequisite for project deployment and online is that you have a domain name and cloud server. I use the .top domain name and Alibaba Cloud lightweight application server. If you don’t have it, you can get the address. If you already have it, ignore 参考博客 this operation.

3.1 Vue project deployment

3.2 SpringBoot project deployment

3.2.1 Upload jar package and script

First download the general script that the jar package starts on the linux system, start the script and download the configuration file , use the script to start to ensure that the back-end project is always started, after the download is complete, upload the decompressed file to the folder where the server jar package is located .

3.2.2 Check whether the project port is occupied

Before starting the project, check whether the port of your backend project is occupied. If it is occupied, you need to kill the process that occupies the port first. The port of my backend project is 8090.

pass

netstat -an | grep 8090

It is found that the port is occupied, so the PID of the port is queried

lsof -i:8090

kill process by PID

kill -s 9 8885

Then open the pagoda and run again

Reference URL

3.2.3 Start the back-end project with a script

• Enter the directory where the backend project jar is stored, and then open the pagoda terminal

• Enter sh build.shthe command to run the build project, it will show that the build is successful

• Enter the autoScript folder cd autoScript, there are several sh files in it, run sh startup.shthe command, the project will start, and it will never stop

After the startup is successful, just close the terminal window

• If you want to close the project, use sh shutdown.shthe command

4. Configure Nginx reverse proxy

Because the front-end and back-end projects run on the same server, the ports must be different, and Nginx needs to be configured to request the back-end. Therefore, in the configuration file in the site settings, configure the reverse proxy in the vue project in Nginx again.

The above configuration is just my project configuration, just for reference.

location /api/ {
    
    
    proxy_pass http://xxx.xxx.xxx.xxx:xxxx/;
}

5. Visit your personal website in the browser

Reference URL