Linux deploys front-end Vue project

Linux deploys front-end Vue project

1 Deploy to tomcat

1.1 Deploy Vue project

1. Package project

In the command line terminal, enter the command to package the project:

npm run build

2. Copy all the contents of the generated dist folder to tomcat's webapps

"推荐":在webapps下新建一个文件夹，例如yygh-admin，然后将dist文件夹内容复制进去

3. Start tomcat and enter the access address

http://192.168.145.48:8080/yygh-admin/

yygh-admin is the project name

注意：
If the page is blank after entering the URL, it may be because the js and css files cannot be found, or there may be a packaging path problem:

• vue-cli3 and above:
  Modify the module.exports in the vue.config.js file publicPathto:'./'

module.exports = {
    
    
	/* 其他配置信息... */
	publicPath: '/xxx/'   
	/* 
 	 *  `publicPath` 里面的内容就是配置路径，如果你在服务器根目录下创建一个
  	 *  `newproject`文件夹，那么就需要配置成`/newproject/`。
  	 *  那么访问路径就是`www.test.com/newproject`
  	 */
}

• The next version of vue-cli3: Modify
  the index.js under the config folder in the vue project assetsPublicPathto '/yygh-admin/'(change it to the folder name of your webapps under tomcat)

build: {
    
    
	assetsPublicPath: '/xxx/' // 默认为'/' ，xxx是webapps下的文件夹名
}

Tips about tomcat:

① Modify the icon on the tomcat address bar

- 进入tomcat的webapps/ROOT目录
- 将favicon.ico换成自己的图片即可

②tomat Chinese garbled characters

• If the tomcat console is garbled

(Generally, garbled characters in tomcat are caused by the character set.)
Find the logging.properties file in the conf in the tomcat directory
at about line 47. Change java.util.logging.ConsoleHandler.encoding = UTF-8 to java.util.logging. ConsoleHandler.encoding = GBK Restart tomcat and you can

• Garbled characters when tomcat accesses the page
  

1. Find catalina.bat in the bin file of the tomcat directory and modify around line 216
   set "JAVA_OPTS=%JAVA_OPTS% %JSSE_OPTS%" to set "JAVA_OPTS=%JAVA_OPTS% %JSSE_OPTS%" -Dfile.encoding=UTF-8 -Dsun. jnu.encoding=UTF-8
2. In tomcat’s server.xml configuration,
   add: URIEncoding="UTF-8"

<Connector port="8080" protocol="HTTP/1.1"
        connectionTimeout="20000"
        redirectPort="8443" URIEncoding="UTF-8" />

3. Add in the project’s idex.html (project homepage)
   : content="text/html"; charset="utf-8"
   (head - meta - title)

<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />

4. In tomcat's web.xml, add at about line 119:

<init-param>
    <param-name>fileEncoding</param-name>
    <param-value>UTF-8</param-value>
</init-param>

The effect after adding:

 <servlet>
        <servlet-name>default</servlet-name>
        <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
        <init-param>
            <param-name>debug</param-name>
            <param-value>0</param-value>
        </init-param>
		<init-param>
            <param-name>fileEncoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <init-param>
            <param-name>listings</param-name>
            <param-value>false</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

5. Restart tomcat and check the effect
   

③Tomcat configure https service

1. Download the certificate (you can go to Tencent Cloud to apply for a one-year free certificate)

• Log in to the SSL certificate management console
• In the pop-up window, choose to apply for a free certificate
• Certificate type selection亚洲诚信
• Bind your own domain name, other default recommendations, submit application

The review was very fast, and my certificate was approved in just a few minutes.

2. Download certificate

• Enter your own SSL certificate management platform
• Download certificate
  
• Depending on the encryption type, the downloaded file types are also different. Mine has two files.
  

3. Configure tomcat's https service
   ① Upload the certificate ( .jks) to your own tomcat conf directory
   
   ② Modify the server.xml file

添加443的connector:

<Connector port="443" protocol="HTTP/1.1" 
				SSLEnabled="true"
				maxThreads="150" 
				scheme="https" 
				secure="true"
				keystoreFile="/你自己的tomcat路径/conf/你的证书名.jks" 
				keystorePass="你自己的私钥密码"
				clientAuth="false"
	/>

Example:

<Connector port="443" protocol="HTTP/1.1" 
				SSLEnabled="true"
				maxThreads="150" 
				scheme="https" 
				secure="true"
				keystoreFile="/usr/local/tomcat/conf/example.com.jks" 
				keystorePass="sjoa29281"
				clientAuth="false"
	/>

The above allows you to use the https service.
If you want http服务自动跳转到https:

• Modify web.xml:

Wrap a new line after the closing tag </welcome-file-list> and add the following content

<login-config>
 <!-- Authorization setting for SSL -->
 <auth-method>CLIENT-CERT</auth-method>
 <realm-name>Client Cert Users-only Area</realm-name>
</login-config>
<security-constraint>
<!-- Authorization setting for SSL -->
<web-resource-collection>
   <web-resource-name>SSL</web-resource-name>
   <url-pattern>/*</url-pattern>
</web-resource-collection>
<user-data-constraint>
   <transport-guarantee>CONFIDENTIAL</transport-guarantee>
</user-data-constraint>
</security-constraint>

• Modify server.xml and modify the connector of 80

<Connector port="80" protocol="HTTP/1.1"
  connectionTimeout="20000"
  redirectPort="443" />

This modification operation can jump the non-SSL connector to the SSL connector.

③Test
Enter the URL and press Enter:

Reference: https://blog.csdn.net/weixin_45947267/article/details/109417431

1.2 Deploy the Nuxt project

To be added

2 Deploy to nginx

2.1 Deployment process

①Install nginx

For those who are not familiar with it, please refer to the tutorial below for detailed steps.

Linux installation software collection

②npm run build package vue project

Find the vue project root directory and execute the packaging command

npm run build

After successful packaging, a dist folder will be generated in the root directory.

③Upload to the html folder of nginx

Place the dist folder generated above under the html folder of the nginx server (here I transfer it directly via ftp) [It is best to name the folder name as your own project name when passing it to the server, for example: music-manage]

④Modify the nginx.conf configuration file

Enter the nginx conf directory:

cd 自己的nginx路径

Modify nginx.conf through vim

vim nginx.conf

The specific configuration is as follows (taking the configuration of the music-manage project as an example, I placed this project on the virtual machine with an IP address of 192.168.145.13):

http {
    
    
   server {
    
    
        # 监听的端口号
        listen       8080;

        # 服务名称 生产环境要修改成 公网ip 如 47.105.134.120【网站域名】
        server_name 192.168.145.13;

        # 配置根目录的地址是以 nginx 下的 html 文件夹为根目录来查找的
        root html;

        # 配置默认的主页显示 比如 47.105.134.120:8080 显示的 index 页面
        location / {
    
    
            try_files $uri $uri/ /index.html;	    
        }
        # 配置我们的 admin 的前台服务 比如 47.105.134.120:8080/admin/index.html
        location ^~ /music-manage {
    
    
            # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
            try_files $uri $uri/ /music-manage/index.html;
        }
        # 如果你想配置多个项目的话，可以复制上面的，修改一下就可以同时部署多个前端项目了
        # 比如
        # location ^~ /blog {
    
    
            # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
            # try_files $uri $uri/ /blog/index.html;
        # }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
    
    
            root   html;
        }

	#css样式不显示问题解决
	 include   mime.types;
         default_type  application/octet-stream;
	#中文乱码问题
	charset utf-8;
    }

    include servers/*;
}

If you want to configure multiple projects, just configure multiple servers.

⑤Restart nginx and enter ip+port+project name in the browser to access

It is necessary to open the corresponding access port or close the firewall

If you encounter any problems with the above steps, you can refer to the following module.部署中常见问题

2.2 Common problems during deployment

①Vue build packaging problem

Situation one:

vue packaging: Warning: Accessing non-existent property xxxx of module exports inside circular dependency
Reason: The node version is too high

• method one:

Find \node_modules\stylus\lib\nodes\index.jsthe file and add in front of the code:

exports.lineno = null;
exports.column = null;
exports.filename = null;

• Method two:

Can switch node to v10. version

• Method three:

Upgrade shelljs to v0.8.4 to solve the problem

npm install [email protected] --save

Situation two:

Node's npm run build reports an error xxx is not a function
caching or version correspondence issues

• method one:

删除node_modules文件夹，执行npm install重新生成

• Method two:

Check dependency versions such as webpack

• Method three

Check whether the index.js environment under config is correct. If
the build error is reported, it corresponds to the build part; if the dev error is reported, it corresponds to the dev part.

②nginx startup problem

Bug: If you start Nginx, the following error occurs

emerg] bind() to 0.0.0.0:81 failed (98: Address already in use)

It indicates that the port is occupied. Solution:

• Kill the process occupying the port

//找到对应进程号
ps -ef|grep nginx

UID PID PPID C STIME TTY TIME CMD
root 22048 2762 0 02:08 pts/0 00:00:00 grep --color=auto nginx

UID: The program is owned by this UID

PID: This is the ID of this program

PPID: It is the ID of its superior parent program

C: Percentage of resources used by the CPU

STIME: system startup time

TTY: The login terminal location

TIME: Used CPU time.

CMD: What command is issued

to kill the corresponding process?

kill -9  PID(对应的进程号即可)

• Stop nginx and restart

切换到nginx sbin目录
-- 停止
sudo ./nginx -s stop
 
-- 启动
./nginx

③vue’s css does not display, Chinese garbled characters and image path problems

• css does not display

This is because when the front-end file is rendered by the browser, it is rendered as ordinary text content, not as js or css.

Modify the nginx.conf file and add configuration under the http module of nginx.

include   mime.types;
default_type  application/octet-stream;

• Chinese garbled characters problem

This is actually an encoding problem, we only need to modify nginx.conf

Add charset utf-8 under the server module;

• My nginx.conf configuration, you can refer to it

http {
    
    
   server {
    
    
        # 监听的端口号
        listen       8080;

        # 服务名称 生产环境要修改成 公网ip 如 47.105.134.120
        server_name 192.168.145.13;

        # 配置根目录的地址是以 nginx 下的 html 文件夹为根目录来查找的
        root html;

        # 配置默认的主页显示 比如 47.105.134.120:8080 显示的 index 页面
        location / {
    
    
            try_files $uri $uri/ /index.html;	    
        }
        # 配置我们的 admin 的前台服务 比如 47.105.134.120:8080/admin/index.html
        location ^~ /music-manage {
    
    
            # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
            try_files $uri $uri/ /music-manage/index.html;
        }
        # 如果你想配置多个项目的话，可以复制上面的，修改一下就可以同时部署多个前端项目了
        # 比如
        # location ^~ /blog {
    
    
            # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
            # try_files $uri $uri/ /blog/index.html;
        # }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
    
    
            root   html;
        }

	#css样式不显示问题解决
	 include   mime.types;
     default_type  application/octet-stream;
	#中文乱码问题
	charset utf-8;
    }

    include servers/*;
}

• Image path problem

I wrote a style in Login.vue that pointed to the image location through a relative path, but I found that there was a problem with the access path after the build, so the background image in my background could not be displayed.

Solution: Add the following line of code to the build/utils.js file

publicPath:'../../'

④Uncaught SyntaxError: Unexpected token < in vue

When developing and testing, start npm run dev and it can be accessed normally.

After packaging npm run build and deploying it to nginx, the access page appears blank, and the browser F12 displays an error.

Uncaught SyntaxError: Unexpected token ＜

Mainly a js reference problem:
the previous reference path of the js file was lost when npm run build was packaged.

Find the build: configuration node (usually under the config/index.js file) and change
the value of assetsPublicPath from '/',改为:./

assetsPublicPath: './',

Then repackage and deploy.

⑤The port is not open, the firewall is not closed, and the cloud server security group does not open the corresponding port.

View firewall status

systemctl status firewalld

Turn off firewall

systemctl stop firewalld

Start firewall

systemctl start firewalld

注意：Of course, turning off the firewall directly can save us a lot of things. We don't have to open the corresponding ports one by one, but there is also the risk of being attacked by hackers. Therefore, if the project is deployed on the public network, it is recommended to open the designated port to access the project.

Open specified port

firewall-cmd --zone=public --add-port=8081/tcp --permanent

①- -zone scope
②- -add-port=8081/tcp Add port, format: port/communication protocol
③- -permanent takes effect permanently. Without this parameter, it will become invalid after restarting.

View open ports

netstat -nupl (UDP类型的端口)

netstat -ntpl (TCP类型的端口)

Check usage of specified port

netstat -ntulp | grep 8081

云服务器开放端口（安全组）：