前端项目部署到服务器

12次阅读

1. 准备工具

服务器 : 阿里云 腾讯云 华为云都可以 我这里使用的是阿里云 ECS 共享型 (推荐)

xshell: 用于远程连接服务器 , 修改配置文件

xftp: 用于连接远程服务器 , 将本地资源上传到远程服务器

2. 服务器设置

1. 第一次需重置实例密码

前端项目部署到服务器插图

2. 配置安全组规则

开启常用的端口

22 必须要开 80 是默认访问端口也打开

前端项目部署到服务器插图1

3. 使用 Xshell 连接服务器

打开 Xshell 新建连接 , 名称自己起一个 , 主机写自己服务器的公网地址 , 协议不需要更改。端口选择 22(默认的 , 所以刚刚需要开启 22 端口)

前端项目部署到服务器插图2

点击连接

输入用户名 root 密码是自己设置的密码

前端项目部署到服务器插图3

4. 使用 xftp 将 dist 文件上传到服务器

一样 新建会话 输入账号密码连接服务器

前端项目部署到服务器插图4

进入下面的画面 , 左侧是本地的 , 右侧就是服务器的空间 , 可以在服务器的 root 文件夹下新建文件 , 将 dist 文件拷贝过去。拷贝完成之后就可以退出 xftp 了 前端项目部署到服务器插图5

4. 这个时候访问主机会提示网络错误 , 因为此时我们的主机相当于还只是一个电脑 , 需要安装 nginx 代理服务器

回到 xshell 面板 输入 yum install nginx 安装 nginx 服务器

linux 常用指令 :cd 进入文件夹 / 表示根目录 ls 显示当前目录下所有文件 cd ../ 退回上一层目录

linux 中 蓝色的表示文件夹 白色的表示文件 vim xxx 可以进入编辑文件

安装完成后 输入 cd / 进入根目录 ,nginx 默认被安装到了根目录的 etc 文件下

前端项目部署到服务器插图6

cd etc 里面有 nginx 文件夹

前端项目部署到服务器插图7

cd nginx 进入 nginx 文件夹

找到 nginx.conf 是 nginx 的配置文件

前端项目部署到服务器插图8

vim nginx.conf 编辑 nginx 的配置文件

修改 user 为 root

前端项目部署到服务器插图9

在 server 中可以指定端口号文件路径 ,listen 表示监听的端口号 , 默认是 80 我们可以自己修改

root 是访问改主机的这个端口的时候 , 会到哪个根目录下去找资源 , 这里就是将我们的 dis 文件的目录放进来就可以了。

index 是在 root 指定的目录下去找哪个文件

前端项目部署到服务器插图10

修改完成之后保存退出 重启一下 nginx 服务器即可

nginx 启动命令 :nginx

nginx 停止命令 :nginx -s stop

vim 用到的命令 :q! 不修改退出 wq 保存退出

如果用到了代理已经 history 模式的话 还需要再 location 中去配置 , 这里暂时没有用到 后面会补充

原文链接:https://blog.csdn.net/m0_58709757/article/details/123915799

正文完
 
追风者
版权声明:本站原创文章,由 追风者 2024-01-02发表,共计988字。
转载说明:声明:本站内容均来自互联网,归原创作者所有,如有侵权必删除。 本站文章皆由CC-4.0协议发布。