东君博客完整项目部署文档

最新推荐文章于 2024-08-25 09:57:22 发布
最新推荐文章于 2024-08-25 09:57:22 发布
阅读量121 收藏
点赞数
文章标签： vue.js spring boot
原文链接：https://www.solargod.cn/articles/115
版权

1.docker的安装

以下命令基于CentOS环境。

  1. 下载工具

    yum install -y yum-utils

  2. 设置镜像的仓库

    yum-config-manager \
    --add-repo \
    https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo  #配置阿里云的镜像

  3. 更新yum软件包索引

    yum makecache fast

  4. 安装docker相关配置

    yum install docker-ce docker-ce-cli containerd.io

  5. 启动docker

    systemctl start docker
# 查看当前版本号，是否启动成功
docker version
# 设置开机自启动
systemctl enable docker

2.安装mysql

2.1 无挂载模式

这种方式直接运行mysql之后，所有关于mysql的内容都在容器中，后续如果需要修改mysql的内容，需要手动进入容器内进行操作。且在宿主机上无备份，一旦容器被删除，数据也会被删除。

docker pull mysql //下载MySQL镜像
docker run --name mysql --restart=always -p 3306:3306 -e MYSQL_ROOT_PASSWORD=密码 -d mysql //启动MySQL

2.2 数据卷挂载模式

和无挂载模式相对，通过数据卷挂载的方式运行容器，将容器内的部分重要文件映射到宿主机上。直接操作宿主机对应的映射文件就能和容器内作同步，方便操作的同时还能保证容器内的数据在宿主机上有一个备份。

下面的命令分别对mysql的日志文件、配置文件、数据文件进行了映射，你也可以自己修改。

docker run -d -p 3306:3306 --restart=always -v /auroras/mysql/log:/var/log/mysql -v /auroras/mysql/data:/var/lib/mysql -v /auroras/mysql/conf:/etc/mysql/conf.d  -e MYSQL_ROOT_PASSWORD=密码  --name mysql mysql

3.安装redis

docker pull redis //下载Redis镜像
docker run --name redis  --restart=always -p 6379:6379 -d redis --requirepass "密码" //启动Redis

4.安装rabbitmq

docker pull rabbitmq:management //下载RabbitMQ镜像
docker run --name rabbit --restart=always -p 15672:15672 -p 5672:5672  -d  rabbitmq:management   //启动RabbitMQ,默认guest用户，密码也是guest。

5.安装elasticsearch

docker pull elasticsearch:7.9.2

mkdir -p  /home/elasticsearch/data/ 
mkdir -p  /home/elasticsearch/config/

5.1 编写配置文件

echo 'http.host: 0.0.0.0
http.cors.enabled: true
http.cors.allow-origin: "*" '>>/home/elasticsearch/config/elasticsearch.yml

5.2 修改文件夹权限

chmod -R 777 /home/elasticsearch/
ls -l # 查看文件权限

5.3 启动elasticseach镜像

docker run --name elasticsearch -p 9200:9200 \
 -p 9300:9300 \
 -e "discovery.type=single-node" \
 -e ES_JAVA_OPTS="-Xms64m -Xmx128m" \
  -v /home/elasticsearch/config/elasticsearch.yml:/usr/shellare/elasticsearch/config/elasticsearch.yml \
 -v /home/elasticsearch/data:/usr/shellare/elasticsearch/data \
 -v /home/elasticsearch/plugins:/usr/shellare/elasticsearch/plugins \
 -d elasticsearch:7.9.2

接下来我们就是拿浏览器访问啦。

在浏览器上输入：服务器IP地址:9200

可能出现的问题：

  1. 启动成功，但是访问失败的话，查看一下安全组中映射端口是否已经打开。

  2. -e ES_JAVA_OPTS=“-Xms64m -Xmx128m”：配置内存大小出现了问题。（可试着调一下，docker玩不坏的，莫慌）

  3. 最后就还有可能是配置文件中出现了问题。

    echo 'http.host: 0.0.0.0
http.cors.enabled: true
http.cors.allow-origin: "*" '>>/home/elasticsearch/config/elasticsearch.yml

    http.host: 0.0.0.0 在冒号后面有一个空格的，这里的配置文件是yml格式,所以一定要严格按照yml格式来书写。

安装ik分词器

进入已经启动成功的elasticsearch容器。

docker exec -it elasticsearch /bin/bash

./bin/elasticsearch-plugin install https://github.com/medcl/elasticsearch-analysis-ik/releases/download/v7.9.2/elasticsearch-analysis-ik-7.9.2.zip

ps: 安装的ik分词器的版本一定要与elasticsearch的版本保持一致

下载过程中如果遇到选择，直接输入 y回车就可以了。

下载完成之后，退出去，重新启动elasticsearch容器。

docker restart elasticsearch #  <容器名o容器id>   重启容器命令

测试ik分词器是否安装成功

安装完成后，我们再来进行测试遍，看看有什么样的变化。

postman post请求分词测试：http://服务器IP地址:9200/_analyze

{
	"tokenizer":"ik_smart",// 分词器不同，这个地方也会有变化 具体的可能还需要去学习。
	"text":"我爱技术"
}

结果

{
    "tokens": [
        {
            "token": "我",
            "start_offset": 0,
            "end_offset": 1,
            "type": "CN_CHAR",
            "position": 0
        },
        {
            "token": "爱",
            "start_offset": 1,
            "end_offset": 2,
            "type": "CN_CHAR",
            "position": 1
        },
        {
            "token": "技术",
            "start_offset": 2,
            "end_offset": 4,
            "type": "CN_WORD",
            "position": 2
        }
    ]
}

6.安装MaxWell(ElasticSearch同步数据）

docker pull zendesk/maxwell //下载MaxWell镜像
docker run --name maxwell --restart=always  -d  zendesk/maxwell bin/maxwell  --user='数据库用户名' --password='数据库密码'  --host='IP地址'  --producer=rabbitmq --rabbitmq_user='MQ用户名' --rabbitmq_pass='MQ密码' --rabbitmq_host='IP地址' --rabbitmq_port='5672' --rabbitmq_exchange='maxwell_exchange'  --rabbitmq_exchange_type='fanout' --rabbitmq_exchange_durable='true' --filter='exclude: *.*, include: aurora.t_article.article_title = *, include: aurora.t_article.article_content = *, include: aurora.t_article.is_delete = *, include: aurora.t_article.status = *' //运行MaxWell

注意：上述命令中aurora为数据库名称。

7.填写aurora-springboot中的yml文件

此处省略，操作比较简单，就是配置一些简单的ip+端口+用户名+密码，前提是服务器上对应的端口已经打开

阿里云oss具体情况详见百度

QQ互联具体情况详见百度

这里就不赘述了

8.打包运行后端项目

  1. 使用idea右侧Maven的package命令

  2. 在服务器的/usr/local/下面创建名为docker的文件夹

  3. 将打包好的jar包传到服务器上面的/usr/local/docker下面

  4. 编写Dockerfile,同时将编写好的Dockerfile传输到服务器的/usr/local/docker下面

FROM openjdk:8
VOLUME /tmp
ADD aurora-springboot-0.0.1.jar blog.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/blog.jar"]

注意：Dockerfile文件只需要上传到指定目录下即可，不需要手动执行其他操作。

  1. 编写aurora-start.sh,同时将编写好的aurora-start.sh上传到服务器的/usr/local/docker下面
#源jar路径  
SOURCE_PATH=/usr/local/docker
#docker 镜像/容器名字或者jar名字 这里都命名为这个
SERVER_NAME=aurora-springboot-0.0.1.jar
TAG=latest
SERVER_PORT=8080
#容器id
CID=$(docker ps | grep "$SERVER_NAME" | awk '{print $1}')
#镜像id
IID=$(docker images | grep "$SERVER_NAME:$TAG" | awk '{print $3}')
if [ -n "$CID" ]; then
  echo "存在容器$SERVER_NAME, CID-$CID"
  docker stop $CID
  docker rm $CID
fi
# 构建docker镜像
if [ -n "$IID" ]; then
  echo "存在$SERVER_NAME:$TAG镜像，IID=$IID"
  docker rmi $IID
else
  echo "不存在$SERVER_NAME:$TAG镜像，开始构建镜像"
  cd $SOURCE_PATH
  docker build -t $SERVER_NAME:$TAG .
fi
echo "$SERVER_NAME容器创建完成"

注意事项：sh文件需要用notepad++转为Unix格式

具体操作：点开notepad++中的编辑 —> 文档格式转换 —>转为Unix

  1. cd到/usr/local/docker下面 ，执行如下命令打包docker镜像文件
sh aurora-start.sh
  1. 启动容器
docker run  --name aurora-springboot-0.0.1.jar -d -p 8080:8080 aurora-springboot-0.0.1.jar:latest

  1. 这样后端项目就可以在服务器上跑起来了

  2. 访问测试(浏览器上访问)

    ip:8080/

9.打包运行前端项目

  1. aurora-blog项目中，更改src/config/config.ts

      captcha: {
    TENCENT_CAPTCHA: '你自己的天御验证码'//用我的也行，但是防止我的使用量过多，导致无法验证，推荐使用自己的，毕竟我也没有充钱
  },
  qqLogin: {
    QQ_APP_ID: '你自己的APP_ID',
    QQ_REDIRECT_URI: 'https://你的前台域名/oauth/login/qq'
  },

  2. aurora-blog项目中，更改public/index.html

    <script
      src="http://connect.qq.com/qc_jssdk.js"
      data-appid="你自己的APP_ID"
      data-redirecturi="https://你的前台域名/oauth/login/qq"></script>

  3. 如果你的网站没有打算使用https,将aurora-blog/public/index.html和aurora-admin/public/index.html中下面这一行代码给注释掉

    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

  4. 分别到aurora-blog和aurora-admin下面执行如下命令 (推荐关闭vscode的Eslint,本项目没有遵循Eslint的规范)

    版本参考：npm版本为：8.3.1 vue-cli的版本为：5.0.6 （如果下列命令执行报错，可以尝试替换版本）

    npm install
npm run build

  5. 在服务器的/usr/local/下面创建名为vue的文件夹，

  6. 将打包好的前台代码重命名为blog, 并传输到服务器的/usr/local/vue下面

  7. 将打包好的后台代码重命名为admin, 并传输到服务器的/usr/local/vue下面

10.安装并启动nginx(没有开启https)

tip: 在这之前，需要到域名提供商那里配置好域名，个人认为没有必要开启https,http完全够，并且省事儿。当然，如果想开启https的话，后面也有相应的教程。

10.1 拉取nginx镜像

docker pull nginx

10.2 在/usr/local/nginx下创建nginx.conf文件，格式如下

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    client_max_body_size     50m;
    client_body_buffer_size  10m; 
    client_header_timeout    1m;
    client_body_timeout      1m;

    gzip on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_comp_level  4;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;

server {
        listen       80;
        server_name  前台域名;
     
        location / {		
            root   /usr/local/vue/blog;
            index  index.html index.htm; 
            try_files $uri $uri/ /index.html;	
        }
			
	location ^~ /api/ {		
            proxy_pass http://你的ip:8080/;
	    proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;						
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
		
    }
	
server {
        listen       80;
        server_name  后台子域名;
     
        location / {		
            root   /usr/local/vue/admin;
            index  index.html index.htm; 
            try_files $uri $uri/ /index.html;	
        }
			
	location ^~ /api/ {		
            proxy_pass http://你的ip:8080/;
	    proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;						
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
		
    }
 }

10.3 启动nginx

docker run --name nginx --restart=always -p 80:80 -d -v /usr/local/nginx/nginx.conf:/etc/nginx/nginx.conf -v /usr/local/vue:/usr/local/vue nginx

11.安装并启动nginx(开启https)

11.1 修改配置文件

要配置https，只需要对上面的配置文件nginx.conf的内容作如下修改即可。

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    client_max_body_size     50m;
    client_body_buffer_size  10m; 	  
    client_header_timeout    1m;
    client_body_timeout      1m;

    gzip on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_comp_level  4;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
	
server {

        listen  443 ssl;
        server_name  你的前台域名(如：www.baidu.com);

        ssl on;
      ssl_certificate ssl证书文件位置; 
	ssl_certificate_key ssl证书文件位置; 
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;

       location / {
            root   /usr/local/vue/blog;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
		
        location ^~ /api/ {
            proxy_pass http://你的服务器公网IP:8080/;
            proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }

    }

server {

        listen  443 ssl;
        server_name 你的后台域名(如admin.baidu.com);

        ssl on;
       ssl_certificate ssl证书文件位置; 
		ssl_certificate_key ssl文件位置; 
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;

       location / {
            root   /usr/local/vue/admin;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
		
        location ^~ /api/ {
            proxy_pass http://你的服务器公网IP:8080/;
            proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
	
    }



server {
        listen       80;
        server_name  前台域名;
		
        rewrite ^(.*)$	https://$host$1	permanent;
		
    }
	
server {
        listen       80;
        server_name  后台域名;
     
        rewrite ^(.*)$	https://$host$1	permanent;
		
    }	
}

11.2 重新运行nginx

由于开启https需要启用443端口，所以在前面(非https)的基础上，下面的运行命令新增了数据卷挂载的方式并打开了443端口。

docker run --name nginx --restart=always -p 443:443 -p 80:80 -d -v /usr/local/nginx/nginx.conf:/etc/nginx/nginx.conf -v /usr/local/nginx/cert:/etc/nginx/cert -v /usr/local/vue:/usr/local/vue --privileged=true nginx
东君博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
c语言修仙东君嗯哼,C语言修仙
weixin_34221654的博客
05-21 4171
熟悉的香气在房间中弥漫开来, 林浔出门吃饭之前打开了窗户企图让香水尽快扩散走。然而, 晚上再次回到房间的时候, 若有若无的香气再次出现在了他身边。林浔没有办法，只能破罐子破摔, 关上了窗户，开始和东君视频。这几天的交流下来，林浔感觉尴尬地气氛有所缓解，他们的话题已经不再局限于指针, 而是开始涉及一些生活和工作——毕竟人在尴尬的时候总是要没话找话的, 而没话找话几天后，他们就会对那些话题习以为常。林...
进销存需求分析文档(通用进销存系统需求分析)
08-12
经过多次修订，确保了文档的准确性和完整性。 1.1 编写目的 文档的编写旨在定义进销存系统的需求，为项目团队提供清晰的工作指南，帮助他们理解系统应有的功能和性能标准，以便进行有效的开发和测试。 1.2 背景 ...
将springboot项目部署到云服务
yuec1998的博客
04-24 306
1,在idea中点击maven的packing打包成jar 2，native将数据库表结构和数据导出为sql • 把文件中的所有的utf8mb4_0900_ai_ci替换为utf8_general_ci • 以及utf8mb4替换为utf8 • 中文乱码解决，在云服务上登录进mysql mysql>show variables like 'char%'; ...
楚辞 东君
qq_38963393的博客
10-29 72
诗词
东君误妾我怜卿(一)
weixin_30377461的博客
03-07 118
元宵节过去了，正月也快完了，童鞋们过完暑假都回校了吧？咱们猪草园的唱诗班，第十五次活动也开张啦。前几次活动都是学英诗，今年首诗，选首南宋短词。　　上星期二，2月18日，NYT发了篇黄俄大扫黄的报道。有关注妇女地位的人士对记者说，她担心运动执法之中，妓女又要受迫害。老农我身为国际妇女解放的老战士，自然也有同样顾虑。但是，俺的很温和文章被毙鸟。花絮。编辑：标题不要有“妓女”两字！老农忍俊不禁：整篇文章...
宝塔部署vue项目跨域
09-03
- *1* *2* [宝塔部署项目&跨域](https://blog.csdn.net/u014632228/article/details/129066281)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...
高中古诗词阅读鉴赏训练试题.doc
10-04
《九歌·东君》是屈原的作品，属于楚辞体，展示了楚文化的独特魅力。楚辞体突破了《诗经》的四言格式，采用长短句结合，使用"兮"字调节韵律，增加了诗歌的音乐性和情感表达。 2. 文体特点：楚辞体，又称"骚体"，以...
高中古诗词阅读鉴赏训练试题(卷）.doc
09-29
2. 《九歌·东君》 - 内容解析：这首诗是楚人祭祀太阳神的颂歌，描绘了日神东君驾驭龙车从东方升起的壮观场景，展现了日神的勤劳和无私。诗中提到的日神对人间的眷恋和担忧，以及通过射天狼来防止灾难，体现了对神明...
vue ref和reactive区别
最新发布
灰海
08-25 565
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Vue Styled Components 新版本发布
As的博客
08-22 461
Feature ### 自动添加前缀(Auto Prefixing) vue-styled-components 会在编译 CSS 时自动添加浏览器私有前缀，这可以确保你的 CSS 规则在最常见的浏览器中兼容。
移动端签名
notagoodwriter的博客
08-23 375
【代码】移动端签名。
vue中定义一个url文件,在vue文件中引入
weixin_65767506的博客
08-22 334
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
vue数据同步（sync修饰符）
weixin_62639453的博客
08-23 288
本文描述的数据同步，是基于父子组件进行传递的参数实现。实现的内容是：子组件里面选择框，选择的对象可以传递给父组件，但一般涉及到子传父，可能会考虑使用$emit然后通过在父组件身上绑定一个自定义方法，通过子组件去emit触发这个事件，传递参数,但是这里不使用这种，新学了一种，数据同步的方式，也就是在子组件选择的数据，可以同步在父组件中。随便在父组件其他地方绑定一个事件，看看有没有获取到从子组件里面获取到的值，因为要拿选择的值过来父组件这边使用。被执行时，父组件会自动接收到这个事件并更新。
vue.js学习步骤
m0_63178019的博客
08-23 733
Vue.js 从一个简单的实验性项目成长为一个功能强大、社区活跃的前端框架，其发展历程展示了它对前端开发的持续创新和改进。通过引入先进的功能和不断扩展的生态系统，Vue.js 为开发者提供了一个高效、灵活的工具，满足了不同规模和复杂度应用的需求。
vue全局参数
qq_34631220的博客
08-24 214
其它页面如果想监听改变。
Vue的生命周期了解
qq_53911056的博客
08-22 1164
文章内容：在Vue框架中，组件的生命周期是一个核心概念。而Vue 2和Vue 3在生命周期方面既有相似之处，也存在一些关键差异。文章将对这两个版本的生命周期进行简要说明，探讨它们之间的差异，以及父子组件生命周期的执行顺序，并解析组件特有的和activated生命周期钩子。
【el-switch更改高、宽、颜色样式】深入浅出element ui的switch同页面存在多个更改样式互不影响
????鱼干～
08-22 922
【el-switch更改高、宽、颜色样式】深入浅出element ui的switch同页面存在多个更改样式互不影响
Vue路由
程小白的博客
08-19 766
这样我们的路由信息就配置好了。但是有一个bug需要解决。当我们配置好路由信息后，重启项目，再次访问，会发现什么也不显示，这是因为当项目启动起来时默认访问的路由的路径是"/"而非“/dept”和"/emp",但是在配置路由时并没有配置“/”的路由，因此要再新配置一个“/"的路由信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值