将GitHub上的前端项目部署至腾讯云服务器

Rainsonn

已于 2023-10-24 11:49:24 修改

阅读量964

点赞数 4

文章标签：腾讯云云计算 1024程序员节 nginx

于 2023-10-24 11:47:34 首次发布

本文链接：https://blog.csdn.net/rainsonn/article/details/134001161

版权

一、服务器购买

以此为例：

选择：

一开始我选了使用应用模板的宝塔面板，虽然也实现了部署，但是觉得很奇怪，然后改用这个，ubuntu资料比较多

购买后跳转到这个页面：登录 - 腾讯云

（因为我自己实在是没法通过页面找到是哪里，就给个链接吧呜呜）

噢对了，记得设置密码，登录名默认ubuntu。之后转到XShell上操作，其实可以直接从网页里登，但是之后要更新部署的话感觉有点麻烦，就用XShell啦

二、XShell上的操作

1. XShell连接

主机填服务器公网ip，端口号不需要改，就是22，然后连接，连接后需要输入用户名和密码。用户名即ubuntu，密码就是刚才设置的密码

2. 将代码从GitHub上克隆下来

这里使用https克隆，问就是SSH没成功过（

首先，在XShell里输入：

git init

然后复制https地址

输入：

git clone <刚才复制的地址>

然后输入用户名和密码

注意，用户名即GitHub的用户名，密码不是登录密码，而是token，需要在GitHub里申请token

3. 获得登录token

步骤如下：

然后选择tokens(classic)

然后根据提示申请一个就好了，得到token后，记得及时保存，因为关闭页面后你就找不到了（是的吧），要是需要只能重新申请

4. 安装node

参照：Ubuntu下安装Node - 掘金

sudo apt install nodejs

sudo apt install npm

看了一下，觉得nodejs版本太老了，然后找了这个：使用apt-get install安装node.js导致安装成低版本的解决方案_apt-get install nodejs 版本过低-CSDN博客

如果出现了这个问题：

输入hash -r即可

5. 安装项目依赖包

根据之前克隆了代码，接下来cd 项目目录，然后npm install，再用npm run build打包

6. 安装nginx

nginx: Linux 软件包 ubuntu安装nginx centos安装 nginx

安装成功后，输入cd /etc/nginx/conf.d

新建配置文件：

vim 自定义文件名称.conf

写如下内容：

server {
    listen      80;
    server_name 你的服务器IPv4地址;

    location / {
        root    /usr/project/webbuilder/build;
        index   index.html index.htm;
    }
}

server {
    listen      80;
    server_name 你的网站域名（如果有的话）;

    location / {
        root    /project/build;
        index   index.html index.html;
    }
}

即允许使用ip和域名访问网站

sudo nginx -t

sudo nginx -s reload

我为了方便，直接在本来就有的default.conf文件里修改。

如果出现了如下报错：

nginx: [error] invalid PID number "" in "/var/run/nginx.pid"

别急，nginx: [error] invalid PID number ““ in “/var/run/nginx.pid“-CSDN博客

这里卡了很久，运行成功后先是显示404，然后显示403什么的

显示404是因为路径问题，路径应该是/home/ubuntu/project_name/build

显示403，是文件权限问题，具体报错可以看/var/log/nginx目录下的error.log查看

如果有修改端口，除了要在腾讯云防火墙上开发权限，如：

还要在ubuntu中设置

sudo firewall-cmd --zone=public --add-port=端口号/tcp --permanent

sudo systemctl restart firewalld.service // 重启防火墙

可以使用

sudo telnet <ip> <port>

测试是否成功远程连接网页

三、试错过程中常用的指令和说明

sudo  # 当你在网上搜到的指令发现好像都不行时，可能是权限不够，尝试在前面加个这个

vim <文件名>  # 查看文件内容（只读），如果在前面加sudo，就可以有权限修改，即sudo vim <文件名>，文件名可以带上路径，在路径存在但文件不存在的情况下，会在这个路径下新建这个文件
esc键  # vim查看文件后，按下这个键就可以输入指令了
:q  # vim后退出文件不保存（为了以防万一，要退出前先按下esc键，:指令都这样）
:wq  # 保存并退出，要想保存需要sudo vim，vim是只读
a  #  编辑模式 通过上下左右移动光标

ps -ef | grep name  # 查看name相关的所有进程  aux和-ef有什么区别，我其实不太懂（
ps aux | grep nginx # 查看nginx进程
ls -a # 查看当前目录下所有文件
cd path  # 进入当前目录下path路径
cd # 退回初始路径


# nginx相关

# nginx重启
sudo systemctl restart nginx  # 完全的重启  使用systemctl命令
# 前面记得加sudo
systemctl status nginx  # 查看nginx服务状态
systemctl disable nginx.service # 关闭开机自启
systemctl enable nginx.service # 开启开机自启
systemctl status nginx.service # 查看状态
systemctl restart nginx.service # 重启服务
systemctl list-units --type=service # 查看所有服务

# 重启方式
sudo systemctl restart nginx  # 完全的重启  使用systemctl命令
sudo /etc/init.d/nginx restart  # 使用脚本
sudo service nginx restart  # 使用 service 命令
sudo nginx -s reload  # 当conf配置文件有修改时，不停止进程的情况下重新加载配置文件
sudo systemctl reload nginx  # 配置更改后重新加载
sudo nginx -s restart  # 我不到啊


# 其他东西
sudo /etc/init.d/nginx status  # 查看状态
sudo kill -s QUIT <PID>  # 杀掉进程
sudo pkill -9 nginx  # 杀掉所有nginx进程  （是这样写的吧）
sudo nginx -s stop  # 停止nginx进程
sudo chmod code <file>  # 修改文件权限

结束，终于调通了，更高级的东西以后再学