Recently, I made a shopping mall project with the separation of the front and back ends to get familiar with the whole process of development. Finally, I hope to have a formal deployment process, so I tried to put the project on the cloud server, and found a lot of problems, so AS to record the whole deployment process.
Use technology stack as the title say is substantially Vue + Spring boot, but still want to mention the detailed version, because in the process to solve the problem found in many effects due to the different development environment, to find the problem if there is no version as a prerequisite will often appear when a lot of unnecessary misunderstanding, or even wrong operation, is a waste of time. The detailed version is as follows:
- Vue 2.6.11
- Vue – cli 4.5.0
- Spring boot 2.1.1
- MySQL 8.0.13
- Nginx
1 Upload Tool
The first step of deployment is to upload the file to the cloud server, and the subsequent operation on the cloud server, there are many methods, HERE I choose Xshell and Xftp tools, both from the company NETSARANG, it should be noted that the application address of the free home version is hidden on the official website in China. It can be downloaded through direct access to Xshell, Xftp free license, and requires name and email.
1.1 Xftp
First new connection in the Xftp, fill in the host address and user name password, the connection is successful can be seen on the left side of the TAB for the local file directory, the cloud server file directory is on the right, as long as from the left or right drag the file to the other side can achieve file upload and download, the transport TAB below shows the specific schedule, The graphical interface is fairly intuitive without too much explanation.
I didn’t find too much information about the directory specification of Linux, so I created a folder named APP in the root directory to store the website application. As for the packaging of the website, we will explain it in the next section, where we can master how to upload files.
1.2 Xshell
The connection establishment method of Xshell is similar to that of Xftp. Fill in the host address, enter the user name and password after the connection, and then you can operate on the cloud server.
After connecting with the cloud server through these two tools, we can start to look at the problems of the web application itself.
2 the front
There are relatively few problems with front-end deployment, so we’ll start with the front end
2.1 the Vue
Since I used VUe-CLI, the program was automatically packaged into the dist folder under the project directory after the project was completed by executing the command NPM run build. The structure of the packaged folder is as follows:
After that, I uploaded the folder to the cloud server through Xftp. I have created a new folder to store it before, because we may have other projects and the background also needs a folder, so the specific folder structure is as follows:
You can use the GRAPHICAL interface of Xftp to quickly create new folders, or you can use commands in Xshell to see your preferences and habits. If you need to use Linux frequently, you are advised to practice using commands.
When developing on The Windows end, a local website can be quickly started by using the NPM Run serve command on the console. However, such a website can only be accessed on the Intranet, which is certainly not up to our initial purpose of accessing the Internet. Therefore, reverse proxy server is required here. I chose Nginx, which is widely used.
2.2 Nginx
- Select the installation directory
cd /usr/local/src
Copy the code
- Install several dependencies before installing Nginx on the server:
yum install gcc
yum install pcre-devel
yum install zlib zlib-devel
yum install openssl openssl-devel
Copy the codeSee this article about installing Nginx dependencies and libraries on Linux, Nginx installation, and Nginx service commands. I haven’t tried missing a dependency one by one. I already installed all of these dependencies before INSTALLING Nginx.
- Download the Nginx installation package and unzip it
You can choose the version you want from the official website.
Wget http://nginx.org/download/nginx-1.13.7.tar.gz # download the tar - XVF nginx - 1.13.7. Tar. Gz # extractCopy the code- Perform the configuration and install
/usr/local/nginx = /usr/local/nginx = /usr/local/nginxCopy the code- After the installation is complete, check the version and start without error
/ usr/local/nginx/sbin/nginx - v # to check the version CD/usr/local/nginx/sbin # CD to the installation position of nginx sbin directory. # / nginx start nginxCopy the codeWelcome to nginx Welcome to Nginx Welcome to Nginx
After Nginx is installed, modify the configuration file for our website application. You can also use Xftp or use commands on Linux to modify the file
location / {
root /app/osd_mall/vue_app/dist;
index index.html index.htm;
}
location /api {
proxy_pass http://localhost:28019/api/v1;
}
Copy the codeHere mapping the two address, the first is the web front end part of the main body, should do not have too many differences, the main problem should be focused on the second address, because I do is a separate project before and after the end, the backend interface is also included in the project, so inevitably cross domain problems, development time using the Vue Proxy processing from the front, the code is as follows:
You can then configure the corresponding name (API) in AXIOS to solve the cross-domain problem, but this is only for local development. Cross-domain problems can be handled more securely on Linux servers using Nginx reverse proxy, so the code in the figure above is no longer needed and needs to be commented out or deleted before packaging.
axios.defaults.baseURL = process.env.NODE_ENV == 'development' ? '/api' : '/api'
Copy the code
After the configuration is modified, test the configuration file and restart the Nginx service
/nginx -s reload # restart nginxCopy the codeAt this time, the front-end page can be accessed through our external IP, but there is basically no data and pictures because the back-end interface has not been configured. Obviously, above the local address http://localhost:28019/api/v1 is our backend interface, then our next to the backend deployment.
3 the back-end
Relative to the front end, back-end problems are emerging in endlessly, there are a lot of twists and turns in the middle, fortunately, finally solved, several of which are the version of the problem emphasized at the beginning.
3.1 Java
Install the Java environment first, download the required version from the official website, and then upload it through Xftp as before:
Create directory, unzip:
mkdir /usr/java
tar zvxf server-jre-8u271-linux-x64.tar.tar.gz -C /usr/java
Copy the codeTo enable Java commands to be used globally, configure environment variables:
#Modify the environment configuration file
vi /etc/profile
#Edit the configuration file and add the following three linesExport JAVA_HOME= /usr/jav/jdk1.8.0_271 export PATH=$JAVA_HOME/bin:$PATH export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
#Enable environment variables
source /etc/profile
#Verify that the configuration is successful and view the Java version
java -version
Copy the code
3.2 Spring boot
There are many options for deploying a Spring Boot project as a package. For details, see this article
I have chosen to deploy using jar packages here, but the steps through Maven packaging are not clear. Upload the JAR file to the server again through Xftp. In my screenshot, there is a dev version that retains the console log version. Normally, only one is required.
3.3 Screen
As mentioned in the article above, the Java project will run in the foreground. When our Xshell window is closed, the project will also be closed, but it is not reasonable to keep the connected machine running, so use the nohub command to always mount the JAR program in the background. Here’s another method, the Screen tool.
Screen is a piece of free software developed by the GNU Project for command-line terminal switching. The software allows users to connect to multiple local or remote command line sessions at the same time and switch between them freely. GNU Screen can be thought of as the command-line interface version of the window manager. It provides a unified interface and functions for managing multiple sessions.
Screen is preinstalled on some popular distributions and you can use the following command to check if it is already installed on your server.
screen -v
Copy the codeIf not, you can simply install it through your own package manager.
yum -y install screen
Copy the codeScreen-s yourname # create a session screen-ls named yourname # list all current session screen-r yourname # return yourname to the session screen-d Yourname # detach a session screen -d -r yourname # End the current session and return to yournameCopy the codeUsing Screen is like a toggle window, which allows multiple applications to be mounted at the same time as the server’s performance allows, and is relatively easy to manage.
MySQL 3.4
1. Install
I almost ignored MySQL at the beginning of the deployment and didn’t think it was the most time-consuming part, but it’s not that difficult if you follow the right steps.
Most of the tools can be installed through the package manager yum, which is the same as Screen. I thought MySQL was the same, but I checked and found that it was the same at first, but after MySQL was acquired, there were copyright issues, so CentOS7 no longer supports MySQL. Instead, MariaDB was integrated internally, which was quite related, resulting in conflicting files, so you had to uninstall MariaDB first.
#Lists all installed RPM packages
rpm -qa | grep mariadb
#Uninstallation (Note that the version number is based on the version information displayed in the current system.)RPM -e mariadb - libs - 5.5.37-1. El7_0. X86_64#You can force uninstallation if dependency detection failsThe RPM -e -- nodeps mariadb - libs - 5.5.37-1. El7_0. X86_64
#Install dependencies
yum install vim libaio net-tools
Copy the codeThen we have to decide is through the repo source directly from the server to download and install or did you go to the website to download a and then uploaded to the server, I initially by the some of the tutorial steps directly from the repo source download, but due to choose the wrong version, the last program cannot correct connection is established, and after trial and error to choose from the community edition’s official website to download version.
The default version is the latest version when entering the website. To find the previous version, click the Archives and select the corresponding version on the new page. The next step is to select an operating system. CentOS is the community distribution of Red Hat, with the same kernel or Generic version.
Download the bundle, extract the five files shown in the figure, and upload them to the server. Install mysql-community-common, mysql-community-libs, mysql-community-client, mysql-community-server, mysql-community-release.
#So onThe RPM - the ivh mysql - community - common - 8.0.13-1. El7. X86_64. RPM
#If dependency detection fails, add --force --nodeps to force installationRPM -ivh mysql-community-common-8.0.13-1.el7.x86_64. RPM --force --nodepsCopy the codeThe current common MySQL version is usually 5.7 and 8.0 after several minor versions, depending on the version used, the subsequent configuration is very different, I use version 8.0.13, 8.0 is also used as an example.
2. Reset the password
In this step, I encountered problems such as permissions, incorrect version, different fields, etc., because I did not expect so many problems at the time of deployment, no screenshots were left, here is the overall idea: Log in to the MySQL database using this password. If you have permission problems, you can first authorize the MySQL folder. After login, change the default password through the data table.
#For login, enter the password directly without any space after -p. The default password of version 5.7 is blank. The default password of version 8.0 is randomMysql -u root -p Password#Switching databases
use mysql;
#Change your password (you can't use a simple password like 123456, it's lowercase and numeric, if you still want to use a simple password, see below)
update user set password=password('123456') where user='root';
#exit
exit;
Copy the codeAfter setting the password, you can log in with the new password. If there is a problem with setting or random password is not recorded and the way to reset the password by modifying the local file is not covered here.
What if it’s just personal development and you don’t want to use too complicated a password? You can fix this by changing the password rules. Again, there are differences between versions 5.7 and 8.0:
# 5.7
set global validate_password_policy=0;
set global validate_password_length=1;
# 8.0
set global validate_password.policy=0;
set global validate_password.length=1;
#View password authentication variables
SHOW VARIABLES LIKE 'validate_password%';
Copy the codeTable of password levels
| Policy | Tests Performed |
|---|---|
| 0 or LOW | Length |
| 1 or MEDIUM | Length; numeric, lowercase/uppercase, and special characters |
| 2 or STRONG | Length; numeric, lowercase/uppercase, and special characters; dictionary file |
3. Remote connection
Having to log in to Linux every time you want to check a database is inconvenient and unfriendly. What if you want to use Navicat locally to access a remote database?
First, turn off the firewall or open port 3306 of the database (preferably open port),
#Checking the Firewall Status
systemctl status firewalld
#Enabling the Firewall Service
systemctl start firewalld
#Open specified ports
firewall-cmd --zone=public --add-port=3306/tcp --permanent
#Reload the
firewall-cmd --reload
Copy the codeIf you are using a cloud server, also remember to open the specified ports on the platform:
After setting the firewall, we still cannot log in remotely, because we do not have authorized users. Let’s check the user table first:
select user,host from user;
Copy the code
Remote is the user I created for remote login. Host stands for the address at which the user can log in. “%” stands for all addresses. Prior to 5.7, users can be created implicitly through authorization, but not after 8.0. It is also possible to change the host of the root user directly, but there is a slight difference in the login.
/* Create a user, where the password is also restricted by the previous password level */
CREATE USER 'Username'@The '%' IDENTIFIED BY 'password';
/ * * / authorization
grant all privileges on *.* to 'Username'@The '%';
Copy the code1251 client does not support authentication 1251 client does not support authentication 1251 client does not support authentication 1251 client does not support authentication 1251 client does not support authentication
alter userThe user name identifiedwith mysql_native_password by 'password';
Copy the codeThis allows you to access remote databases directly from the local database.
4. Uninstall MySQL
If you have any problems installing MySQL, you can uninstall MySQL by following the instructions in this article.
5. The program establishes the database connection
This is the last step. I failed to establish a connection after I tried various methods. If the user name and password are correct, I may need to check the following aspects:
- Whether the database version is consistent with the driver version of the program
- The database connection string is correct
- Check whether the account has access permission
The referenced plug-in version is the same as the database version installed on the server
There are quite a few differences between 5.7 and 8.0 connection strings. 8.0 requires a lot of extra entries, so I’ll leave my connection string here
jdbc:mysql://localhost:3306/onesideddice_mall? useUnicode=true&serverTimezone=Asia/Shanghai&characterEncoding=utf8&autoReconnect=true&allowPublicKeyRetrieval=true&useS SL=false&allowMultiQueries=trueCopy the code6. Import data
This step is very simple, there are various methods, here is a record of the import server SQL file this way:
create database abc; /* Create database */
use abc; /* Use the created database */
set names utf8; /* Set the encoding */
source /home/abc/abc.sql /* Import backup database */
Copy the code3.5 Nginx Image Server
We’ve already configured the back-end interface in Nginx on the front end, so why mention it again? In fact, in theory to this step before, has completed the deployment of the website, if there are no other problems in the middle of the various docking, the website has been able to run normally, but if you have a large number of pictures in the site, you have to think about how to store pictures, how to set the relative path, etc.. After completion of the deployment, I met a lot of problems on the pictures show, the more significant is the relative path image conversion, after looking at some of the website, I found their images are usually alone in images on the server, so that the path of the picture is relatively stable and convenient setting, so I just thought of using Nginx configuration another image server, As far as possible to use the existing server resources, of course, you can also choose seven niuyun this kind of special picture server, so that the access of pictures should be more stable and fast.
- Configure Nginx
Add a new Server to the Nginx configuration to distinguish it from our web application, as follows:
server { listen 8000; server_name localhost; location / { root /app/osd_mall/images; autoindex on; }}Copy the code- The root is to map images to/home/ftpadmin/hatlth/images /
- Autoindex on opens the browsing function.
Remember to test and reload Nginx when your Settings are changed.
- Open ports
Same as opening the database port before.
- Example Modify file access permissions
chown ftpadmin /app/osd_mall/images
chmod 777 -R /app/osd_mall/images
Copy the code- Modify the program
Change the path according to your site, thanks to the unified image server, you can now set up a configuration item to manage the image address, compared to the previous much more convenient, local environment can also use this online image server.
End of 4
Here, the basic deployment is completed, realized from the local Windows to Linux server transition, in the process of problem solving didn’t expect there are so many problems, records missing many details, but the main problem should be solved, hope to be able to help people have a problem, also facilitate their future review.