当前位置:   article > 正文

如何搭建自己的网站_搭建网站

搭建网站

一、购买服务器

首先,得有一台 24 小时无间断运行的服务器,可以选择 Windows 服务器或者 Linux 服务器,Windows 服务器通过 IIS 部署,这个不算复杂,网上可以搜到一大堆教程,本文主要讲述 Ubuntu 服务器下部署 Vue 项目。

二、重置实例密码、设置密钥对

可以选择两种方式去访问服务器,一是通过实例密码,二是通过密钥对。

三、域名购买、备案、解析

买到服务器之后,就拥有属于自己的一片空间了,但是一长串的 IP 不容易记住怎么办,两个办法:①少熬点儿夜,提高记忆力。②挑选一个自己喜欢的域名来代替 IP。大陆的域名都是需要备案的,浙江省的备案大概需要一周左右时间审核,如果身份证上地址不是浙江省,则需要另外提供暂住证明。备案通过之后,就可以解析域名了,一个一级域名可以解析出很多二级域名,一个二级域名可以解析出很多三级域名,依次类推,每一个域名都可以绑定一个服务器公网 IP。

四、SSL 证书

使用 IP 或者普通域名访问时,浏览器一般都会出现网站不安全的提示,那怎么解决呢,可以使用安装 SSL 证书实现 https 加密访问。可以使用腾讯云的一键安装功能,也可以自己手动安装,详情见另外一篇博客:Nginx 服务器 SSL 证书安装部署_acheding的博客-CSDN博客

五、登陆服务器

可以下载 SSH 客户端软件远程登陆服务器实例,如 Putty 等,Port 选 22。
通过第二步重置的实例账号密码登陆,密码输入是不可见的。

六、服务器下载 nginx

1.切换至 root 用户。sudo su root或者sudo -s
2.下载。apt-get install nginx
3.查看 nginx 是否安装成功。nginx -v
4.启动 nginx。service nginx start
5.验证。
启动后,在网页重输入 IP 地址或域名,即可看到 nginx 的欢迎页面。至此 nginx 安装成功。

七、打包 Vue 项目

yarn build || npm run build

八、上传项目

上传打包后的 dist 文件至服务器,这里可以下载 FileZilla 等可视化文件传输工具。

九、修改 nginx 配置

vim /etc/nginx/sites-enabled/default 进入 nginx 配置文件,vi也可以,点击 a或者i 进入编辑,修改 server_name 为 IP 或域名,修改 root 为 dist 文件的路径。因为 Vue 为单页面应用,所以刷新之后会报 404,就需要设置重定向一下:try_files $uri $uri/ /index.html 。编辑完后点击 esc,然后 :wq 保存退出

记得检查一下这个端口号有没有添加到服务器防火墙的规则里。 

十、报错处理

find / -name error.log 寻找 nginx 的报错日志,查看日志,如果出现 “Permission denied” 说明 nginx 权限不够,vim /etc/nginx/nginx.conf 将第一行的 user www-data 修改为 user root 即可。

十一、后端

这个时候前端基本上就完成了,不妨再继续鼓捣一下后端接口。
1.本地下载安装 JDK、JRE、IDEA,配置环境变量。
2.新建 demo 项目,依赖勾选 Spring Web,在 com.example.demo 下创建 controller 文件夹,添加 Java Class,在类外边写上 @RestController 注解,表明它是一个返回字符串的控制器,接着用 @RequestMapping 注解写一个 /hello 请求,运行并打开 localhost:8080/hello 验证一下。


 


3.使用mvn clean package命令清理、打包成 jar 文件,在生成的 target 文件夹下。
4.在 Ubuntu 上通过 docker 部署 jar 包,可以在第一步的时候直接购买自带 docker 基础镜像的服务器。同第八步上传 jar 包到服务器指定文件夹,在该文件夹下创建 DockerFile 文件,将以下内容复制至文件中:

  1. FROM java:8
  2. MAINTAINER test
  3. ADD demo-0.0.1-SNAPSHOT.jar demo.jar
  4. EXPOSE 8080
  5. ENTRYPOINT ["java","-jar","demo.jar"]

第一行表示拉取一个 JDK 为 1.8 的 docker 镜像,第二行表示作者名字为 test,第三行表示上传的 jar 包名字以及替换的名字,第四行表示容器暴露的端口,第五行表示容器启动之后启动的命令,即启动 jar 包。
5.构建镜像docker build -t my/demo .。最后的 . 表示 Dockerfile 文件在当前目录下,my/demo 为构建之后镜像名称。
6.运行容器docker run -d --name demo -p 8080:8080 my/demo
7.查看容器docker ps,查看镜像docker images

十二、请求接口、配置跨域

可以在后端配置,Vue 项目中配置或者 nginx 中配置,这里为 Vue3 下的代码。

  1. <script setup>
  2. import { reactive, onMounted } from "vue";
  3. import axios from "axios";
  4. const state = reactive({
  5. springBoot: "",
  6. });
  7. onMounted(() => {
  8. getSpringBoot();
  9. });
  10. const getSpringBoot = async () => {
  11. let res = await axios.get("/hello");
  12. state.springBoot = res.data;
  13. };
  14. </script>
  15. <template>
  16. <h1>{{ state.springBoot }}</h1>
  17. </template>
  18. <style scoped></style>
  1. import { defineConfig } from "vite";
  2. import vue from "@vitejs/plugin-vue";
  3. // https://vitejs.dev/config/
  4. export default defineConfig({
  5. plugins: [vue()],
  6. server: {
  7. port: 3333, // 打开的端口号
  8. open: true, // 运行时打开浏览器
  9. proxy: {
  10. "^/hello": {
  11. target: "http://xx.xxx.xxx.xx:8080/", //接口的前缀
  12. },
  13. },
  14. },
  15. });

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/编程探险家/article/detail/61701
推荐阅读
相关标签
  

闽ICP备14008679号