欢迎来到我的博客。对于一名大学生来说，拥有自己的服务器不论是在考研复试中还是找工作面试中，都是一个加分项，当你购买一个服务器的时候，还需要做一些配置才可以使用他，下面我将带来Ubuntu配置的服务器部署Vue项目的操作步骤。
1. 准备工作
- 购买服务器，这里推荐阿里云服务器
- 准备vue项目,提前将vue文件运行
npm run build,之后将使用dist文件
- 进入Xshell与Xftp官网,选择个人免费版本下载即可
2. 服务器部分
- 购买完服务器之后，进入控制台，直接搜索云服务器ECS，即可查看你的服务器，点击进入，公网IP即为你服务器的访问地址，主私网IP为局域网访问地址。
- 在右上方选择重置密码，重置密码之后要记住密码，不要忘记了。
- 点击安全组，配置规则，选择手动添加，添加一个端口为80端口，其他的默认保存即可。
| 优先级 |
协议类型 |
宽口范围 |
授权对象 |
描述 |
| 允许 |
1 |
自定义 TCP |
目的80 |
源0.0.0.0/0 |
3. Xshell部分
- 先打开Xshell,点击新建，名称选择你自己想起的名字，主机为之前查看到公网IP，其他的不管，点击链接。
- 然后开始配置环境。
- 先安装nginx：
1
2
| sudo apt-get update
sudo apt-get install nginx
|
4. Xftp部分
- 打开Xftp,在根目录下找到home文件夹，进入，新建一个文件夹，在该文件夹下放入dist文件。
- 之后进入
/etc/nginx/sites-enabled/default目录下，打开default文件
- 修改前：
- 修改为：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| server {
listen 80;
listen [::]:80;
server_name 127.0.0.1;
root /data/blog/backend/dist;
index index.html;
location / {
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /index.html last;
}
}
|
- 之后
nginx -s reload即可。
补充
1. 域名添加新端口(以5000端口为例)
- 根据上面的第二部分，安全组，配置规则，选择手动添加，添加一个端口为80端口，其他的默认保存即可。
| 优先级 |
协议类型 |
宽口范围 |
授权对象 |
描述 |
| 允许 |
1 |
自定义 TCP |
目的5000 |
源0.0.0.0/0 |
- 打开Xftp，进入
/etc/nginx/sites-enabled/default目录下，打开default文件
- 复制之前的80端口代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| server {
listen 80;
listen [::]:80;
server_name 127.0.0.1;
root /home/home/myself/dist;
index index.html;
location / {
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /index.html last;
}
}
|
- 改为5000端口代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| server {
listen 5000;
listen [::]:5000;
server_name 127.0.0.1;
root /home/home/myself/dist;
index index.html;
location / {
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /index.html last;
}
}
|
2. Ubuntu下操作Nginx常用命令
1
2
3
4
5
| sudo apt install nginx
sudo /etc/init.d/nginx start
nginx -s reload
sudo /etc/init.d/nginx quit
nginx -s stop
|